Copyright: © 2000 Ulead Systems, Inc.


This screen only appears if you are missing the Contents file (ssp.cnt). Please contact Ulead Systems to procure a replacement.

SmartSaver is © 2000 Ulead Systems, Inc. All rights reserved.


Getting started

When you run SmartSaver, it can seem a bit confusing at first glance. Below is a list of suggested topics to look at in order to familiarize yourself with the program, its purpose, and how it basically works.

To learn what's new in this version of SmartSaver, click here [image].

To read about the basics of image slicing, JavaScript rollovers, image mapping, and optimization, the best place to begin is here [image].

To learn about the program window and what each area does, start here [image].

To learn how to use SmartSaver's functions, click here [image].

Hint: Topics are grouped by category and as such you can use the browse buttons at the top of the help window to scroll through all the topics in any given group.

  Related Topics


Introduction
SmartSaver: An introduction

Ulead SmartSaver Pro is the premiere web-graphics optimization tool. With it, you can squeeze away the extra weight from your images and make them web-ready in minutes. They'll load faster (in some cases by as much as 200%) and you won't lose visitors to your site because the download time for your pages is too long.

SmartSaver lets you open images in variety of image file formats and then optimize them. You can adjust the quality and compression settings of the image so that you can create a smaller file with better quality, and then save it as one of the three most common web image file formats: GIF, JPG or PNG. In addition to saving images, SmartSaver lets you slice them, automatically generating the appropriate HTML table code for you, so that larger images load faster. SmartSaver also assists you in creating interactive HTML-based image maps. Generate any shape hotspots over your images in seconds, even across sliced image cells, and then output the corresponding HTML code to either a file or the Windows clipboard.

SmartSaver offers you the following features:

Slicer - Break apart large images to get the impression of a faster preview when the separate portions download individually. Sliced images are saved along with a corresponding HTML file containing all the table code for reassembling the image in your web browser. Slicer data can be saved independently of the HTML file generated for later use in other images. Sliced image cells can be optimized individually with unique settings or as a whole, sharing the same settings.

JavaScript - JavaScript is an enhancement to the basic web technology of HTML, one that lets users put scripted events and interactions into their web pages to make them come alive. In SmartSaver Pro, you can create JavaScript 'mouse over' to add interactivity to your images and buttons. The JavaScript features in SmartSaver Pro let you create a large variety of rollover effects which interact to your images and buttons.

Image Map - Create clickable hotspots in your images to enhance navigation on your web pages. Hotspot information, like Slicer information, is output to HTML along with the image(s) so that it can be utilized in your web site. It can also be saved as its own data file to be opened again at a later time and reused within SmartSaver.

Optimizer - The heart of SmartSaver is the Optimizer, which is where you take your original images and make them web-ready by optimizing them. Simply select an output file format, and adjust the settings until you get a reasonable balance between final file size and quality. The Optimizer has a side-by-side preview displaying both the original image and the modified image. Each change in the optimization settings is reflected immediately in the modified image preview pane. All settings can be saved as Presets and used again.

Preview - On computers with either Microsoft Internet Explorer 4.x or Microsoft Windows 98, you can preview your work directly within SmartSaver and see the final results as they'll appear when incorporated into your web pages. You can change any of the settings in any mode and see the results immediately.

  Related Topics


Web file formats, GIF
Web file formats (GIF)
 GIF	 JPG	 PNG

GIF is an acronym for Graphics Interchange Format, an image file format created by CompuServe for conveniently storing and displaying image libraries online. Because of its lossless compression and relatively small file size, GIF has become one of the most widely used image file formats on the Internet today. GIF has undergone two major revisions since its inception in 1987, the most recent being the GIF89a specification.

GIF uses the Lempel-Ziv-Welch (LZW) compression method to store and reduce single or multiple images within the file by up to 40% of their original size. These images can contain up to 256 colors, and they do not lose any of their original quality when undergoing compression. Even though GIF is a “lossless” format, images that are imported from other file formats and converted to GIF may lose some of their quality in the transition from True Color to 256-color. GIF files also possess transparency attributes so that one color in the image is not displayed. This allows users to create clear backdrops for their images, letting a web-page’s background colors show through. GIF also supports image interlacing, allowing users to watch the image “fade-in” as it downloads.

If multiple images are stored within a GIF file, they can be viewed sequentially much like a slide show or a small animated movie. The way they appear is defined by control extensions built into the file. With the appropriate tools, such as Ulead GIF Animator, you can set these controls yourself.

Pros:

Very compact file sizes when saving clipart style or text-based images.

True transparency support.

Supports multiple image layers and animation.

Cons:

Poor at storing photo-realistic images due to limited color palette.

Limited animation controls.

  Related Topics


Web file formats, JPG
Web file formats (JPG)
 GIF	 JPG	 PNG

The JPG (also called JPEG) file format was published by the Joint Photographic Experts Group as a means to compress true-color photo-realistic images into an easy to transmit, compact image file. It was released in 1987 after approximately 5 years in various forms of development and is one of the few file formats that can effectively compress images which contain hundreds of thousands of photo-realistic colors into manageable sizes.

Unlike GIF or PNG, the compression algorithms used when building a JPG file create 'lossy' results where some image data is sacrificed and lost in order to bring the image's file size down. The amount of loss depends on just how much compression is applied to the image. With less compression, the general integrity of the image remains high, but with very high compression it quickly disintegrates. At maximum compression, the image is virtually incomprehensible. Fortunately, the JPG file format supports 24-bit images, which allows more than 16 million colors to be stored within it - because of this, the image can be blurred slightly, or dithered, in order to compensate for the loss of detail and subsequently taking some of the 'bite' out of the compression. By carefully balancing compression and quality, you can often times create very small files with very good quality.

Pros:

Very compact file sizes when saving photo-realistic images.

16 million+ colors supported.

Up to 25:1 compression without significant loss in quality.

Cons:

Doesn't handle line-art or text very well.

Noticeable degradation of quality once compression supercedes 25:1.

  Related Topics


Web file formats, PNG
Web file formats (PNG)
 GIF	 JPG	 PNG

The Portable Graphics Network, or PNG, file format was introduced formally to the web in 1996 by the W3C and authored by Thomas Boutell, Mark Adler, Tom Lane and about 22 others. It was designed to be an open file format that any company could use without having to pay the royalties required by GIF89a and JPG. It contains all the best features of GIF and JPG, but the cost is that PNG file sizes tend to be a little larger than the other two.

Like GIF, PNG is a lossless file format. It supports both Indexed (8-bit) and True Color (16-bit) images, meaning it can perform like both GIFs and JPGs. When working in 8-bit mode, the colors in your image are based on the colors in a single color palette containing up to 256 colors, and when working in 16-bit mode, your images can contain millions of colors similar to JPG. PNG's lossless behavior carries over to 16-bit mode, and this the reason why PNG files are often larger than their JPG equivalents - of course, PNG image quality is 100% true to the original, unlike JPGs. Because PNG is a relatively young file format, it hasn't yet been fully integrated with the web at large; most web browsers didn't natively support PNG until version 4.0, and even then there were still problems with improper implementation. However, as more and more people discover the benefits of PNG, this file format is increasingly becoming more popular.

Pros:

Absolute lossless compression.

Index and True Color support.

Supports 16-bit alpha channels and transparency.

Open standard for developers.

Cons:

Doesn’t support animation.

File sizes may be larger than either GIF or JPG.

  Related Topics


About image slicing
Image slicing

Image slicing is the process in which you cut a single image into multiple parts, then reconstitute the entire image on an HTML page using tables to link the various pieces. This is usually done with large images to allow users a faster loading preview - whether or not an image actually loads faster sliced, as opposed to un-sliced, is still a matter of debate. The total amount of data is still the same whether the page is loading 5 pieces that constitute a single image or whether it's loading the entire image as a whole. However, because of the way data 'packets' are bounced around the Internet, a web browser will usually load some pieces before others (generally the smaller ones), thus giving the user a faster preview than if they were to wait for the whole image to load. Slicing an image is also good for creating interactive image maps with rollovers - each sliced cell can be 'hot' and can take mouse rollover JavaScript code, something you can't do to portions of a larger, intact image.

When you slice images in SmartSaver, the table code designed to join the image cells is generated automatically for you.

Click here for more on image slicing.

  Related Topics


About image mapping
Image mapping

Image maps are images that contain clickable 'hotspots'. The image map data is not actually stored within the image itself, but rather in the HTML page the image is embedded within. Each hotspot has its own set of coordinates; an image mapped picture is labeled as such in the HTML in order to let the web browser know that it should use it as a reference when processing these hotspot coordinates. Hotspot coordinates can be almost any shapes, so if you create a rich, complex graphic and need to make specific objects or people 'hot', you can.

SmartSaver gives you all the tools necessary for creating image maps and outputting the corresponding HTML. You can draw rectangular, circular or polygonal hotspots directly within SmartSaver, or import an image file and use it as a 'mask' to create a polygonal hotspot.

Click here for more on image mapping.

  Related Topics


About image optimization
Image optimization

Image optimization allows you to take your graphics and make them web-ready by compressing them down to manageable, easy-to-download file sizes while at the same time maintaining their inherent quality. Nowadays, the rule of thumb on the web is: if a page weighs more than 50KB, it's too large and takes too long to download. This means that people aren't going to stick around because patience on the Internet can be measured in seconds not minutes. However, if you optimize your images for the web, this goes a long way toward reducing the overall weight of your web pages.

Unfortunately, one of the side effects to image optimization is that generally the compression algorithms involved not only reduce the file sizes, but also the quality. SmartSaver, though, gives all of the controls necessary for achieving a careful balance between maximum compression and maximum quality.

Click here for more on optimizing for the web.

  Related Topics


Slicing images for the web

To slice images for the web:

1	Open an image in SmartSaver.

2	Click the Slicer tab [F3] to switch to that mode.

3	From the Tools panel, select the Draw Line tool.

4	Inside the edit window, draw the lines along which you want SmartSaver to slice. Each cell created can be assigned its own URL, target frame and alt text.

5	To remove lines, click the Erase Line tool, then select the line you want to remove and click. You can reset the entire image by clicking the Erase all sliced lines button on the Properties panel.

6	Go to the File: Save menu command to save the sliced images with the associated HTML file. Images are saved with the same name as the HTML file, appended with a numerical suffix (A x B), where A is the row number and B is the column number for each sliced image cell's position in the table.

  Related Topics


Creating image maps

To create image map hotspots:

1	Open an image in SmartSaver.

2	Click the Image Map tab [F5] to switch to that mode.

3	From the Tools panel, select a Draw shape tool.

4	Inside the edit window, draw in the area you want to make 'hot' within the image.

5	To use the existing transparent area as a hotspot, click the Add Area Based on Transparency button on the Properties panel. To import a shape from an outside file, click the Add Area Based on Import Mask File button on the Properties panel. You can reset the image back to its original state and remove all hot areas by clicking the Erase All Mapped Areas button on the Properties panel.

6	Click the Save button on the Standard toolbar, or select the File: Save menu command to save the image and the associated HTML file.

  Related Topics


Optimizing images for the web

To optimize images for the web:

1	Open an image in SmartSaver.

2	Click the Optimizer tab [F7] to switch to that mode. Your image appears by default in two separate panes; the first one displays the original image with the associated file size listed above it, while the second one displays the modified, optimized image with the associated file size and average download time listed above it. Click the Show Optimized Image Only [image] button to hide the original image.

3	Select the optimizer mode you want to work in from the Properties panel [image]. You can work in either GIF, JPG or PNG. In brief, GIF is best for line art and text-based images with small color palettes; JPG is best for photo-realistic images with millions of colors; and PNG is good for both line art and photo-realistic images, but these files tend, on the average, to be slightly larger than either GIF or JPG, due to the file format's absolute lossless nature.

4	Adjust the compression and quality settings of your image on the Properties panel. Each file format has its own unique settings. For more details on each of the settings, click here.

5	After you finish optimizing the image, you can save it as either a set of web-images (with an associated HTML file) by clicking Save in File Menu, or by itself by clicking the Save button located below the optimized image window.

  Related Topics


Working with HTML

SmartSaver generates HTML 4.0 compliant code as you work; when working in Slicer mode, it creates all of the table code necessary for re-creating the image as a whole on the web page; when working in Image Map mode, it creates all of the hotspot coordinate information as well as the client-side map code. In any mode, it generates the base <img src> tag.

When you click the File: Save or Save HTML menu command, this HTML code is saved along with your image(s). To integrate it into your web pages, simply open the page in your favorite HTML editor, select the code, copy it, and then paste it into the final page. Make sure that all of the associated image files are moved into the same directory as your new web page (or reassign the <img src> links in order to locate them.)

After you changes the settings or images to your table in SmartSaver, select Update HTML from File menu, it directly updates the table for you without changing the rest of content in your HTML file. At the same time, the images in subfolders also gets modified or updated. Saves you trouble and time for.

  Related Topics


Credits
Credits:

Program Version 3.0: Steve Chen, Taur, MacBear, Rubing and Deuce

Online Help: Anna Yew, Joy Hsieh


Lossless vs Lossy

When you create a digital image, each color and pixel is typically represented by many lines of code. Fully uncompressed image data of this sort is usually too unwieldy to be easily manipulated in a digital environment where storage space is often at a premium. As a result, various image file formats have been developed over the years, each one using its own compression scheme to make the data smaller and hence more manageable. Some compression schemes are lossless, meaning that the overall quality of the image is unaffected by the data compression, while other schemes are lossy. Lossy images discard data in order to further reduce the file size, casting away pieces of irrelevant information or data that can afford to be lost and not overly detract from the image quality, such as background information.

For the most part, lossless file formats such as BMP, PSD, and TIF tend to be rather large when compared to the lossy formats, such as JPG. Lossy formats have an advantage in significantly smaller file sizes, making them very portable as well as the ideal format for the bandwidth-hungry Internet, while lossless formats remain true to the image data contained within them. Where the web is concerned, lossy file types are best used for saving photo-realistic images that can afford some background data loss and blurring while lossless file formats are ideal for line art, clip art, text and anything else that requires a set number of colors.

In SmartSaver, there are two lossless file formats, GIF (Indexed-256 color) and PNG (True Color and Indexed-256 color) and one lossy file format, JPG (True Color).

  Related Topics


Subsampling explained

Note: This is a simplified description of subsampling to help you better understand how it works for JPG images.

Digital images consist of patterns of dots called pixels. For JPG images, each pixel has three characteristics (entries) to define its color. The H value describes its brightness and the Cb and Cy values describe the two color components. It is the brightness of each pixel that our eyes are most sensitive to. So it is the most critical component to be reproduced in the image. This is where subsampling helps enhance compression. Applying subsampling to an image tells the compressor to retain all the brightness information but to average some of the less important color information.

Think of your image as groups of pixels arranged into blocks. Each square block contains four pixels. Without subsampling, each block requires twelve entries to describe it, (three for each pixel). If we subsample using the YUV411 method, each pixel keeps its own brightness (H) value, but the color values (Cb and Cy) are each summed and then averaged. Each pixel in the block then uses this value, so the number of required entries for the block drops to six, (four brightness values and two color values.) The YUV422 subsampling method is a compromise between None and YUV411 and consists of eight entries, (four brightness, two for the first color channel, and two for the second color channel). For example, this square with no subsampling might be represented as:

with YUV422 subsampling, it might be:

with YUV411 subsampling, it might be:

Each algorithm has its own advantages and disadvantages, all of which are dependent on the type of image you are compressing. Some images can receive one algorithm well and come out looking pretty good, while another image could use the same algorithm and come out looking pretty bad. Therefore, it's a good idea to experiment with each when saving your images as JPGs to find out which one works well for that particular image. In some cases, it may even be desirable to not apply any subsampling.

  Related Topics


Working with animated GIF files

SmartSaver lets you take an animated GIF file and work with it across each image layer. This is useful for slicing apart animations and isolating a single animated element, for example, then optimizing the rest of it as single file. You can also create image maps over animations, but these apply to the animation as whole not individual frames. Finally, you can export animation frames and apply an optimization preset to them.

  Related Topics


About GIF and PNG color palettes

Every GIF image file contains within it an index table that defines the number of colors that an image contains as well as exactly what colors each index represents. Every color in the 256-color ‘spectrum’ has its own unique identification, which is stored in the image’s color index (the color palette). In GIF files, every color in the index requires 3 or 4 bytes of data to define it (depending on how it was originally stored). An image with a 256-color palette, then, could have a color index up to 1024 bytes long. Because of the reliance on color indexing, GIF is called an Indexed 256 Color image file format (as opposed to True Color images, which support more than 16 million colors).

PNG files, if saved as an Indexed Color image, also contain color palettes that are identical to GIF palettes in every respect, except that PNG doesn't support multiple image layers. As with GIF, Indexed-color PNG files use a lossless compression method, so as long as the image contains 256 colors or less there will be no loss in quality. However, if you are converting from a True Color image down to Indexed 256, then there will be significant loss in quality - this is not due to the PNG or GIF compression, but rather because the original image contains millions of colors that must be discarded in order to fit the image's color data onto the limited 256 color palette both file formats utilize. SmartSaver automatically builds the color palettes in as intelligent a way as possible, using dithering schemes to compensate for missing colors. However, not all images can be rebuilt effectively this way and the only recourse is to save it as either a JPG or True Color PNG file, both of which support millions of colors.

  Related Topics


About JPG quality

The JPG file format allows you to take images with millions of colors (True Color images) and, through careful use of the quality-compression controls, make them compact and easily portable. Unlike GIF or Indexed PNG, JPG doesn't store image data in an absolutely lossless format. Because of the various algorithms involved, JPG images tend to lose data that is considered non-vital or irrelevant. Fortunately, however, the JPG file format provides you with a means of controlling how much is discarded - One of them is the quality setting, lets you decide how much compression to apply to the image. If you select a high quality, then less compression is applied. Lower quality opens the doors for more compression and subsequently smaller file sizes. When saving images as JPGs a fine balance must be struck between quality and compression. Another one is Chroma setting, lets you how true the colors in the image are close to the original ones. The higer rating you set, the closer the colors gets close to the original. But the file size also grows. You are allowed to set these two settings to be at the different ratings, but you may go with the default which they are at the same rating.

SmartSaver provides you with all the tools necessary for achieving this balance. With it, you can interactively adjust your image's quality versus compression, all in real time.

  Related Topics


Working with the Image History window

When working in Optimizer, you may want to experiment with a variety of different settings. Using the History window, you can save these settings and them view them against one another in a side-by-side environment in order to select the one that best suits your needs.

First, click the Batch button located below the preview window of the optimized image. In the dialog box that appears, make settings for as many optimization results as you need.

To save the current image and settings to the History window, click the History Menu button below the optimized image preview window [image] and select Add to History from the menu.

To view the History window, click the History Menu button and select Show History Image Window. There are 4 panes in the History window. You can select any image in the History list and view it in any of the 4 windows. If you mouse over the display window for each History item, a ToolTip appears showing the current image's optimization settings. With the Hand Tool, you can move the image around to view all the image in the window.

To open an image from the History window into Optimizer, click the Load button on the bottom right of each history window.

If you are not satisfied with the optimization results, you can select Clear History from the History Menu. The optimization results in the current history window will be discarded.

  Related Topics


Batch process a website
Batch processing a web site

Often, when working with the images of an entire web site, it's more convenient to batch process them rather than slice, map, and optimize them one by one. SmartSaver makes this easy with its Batch Process feature.

To batch process an entire web site:

1	Click the File: Batch Process menu command to open the Batch Process dialog box.

2	On the File tab, under Import source, select By folder and then Include subfolders.

3	Click the Image Types button to open the Image Types dialog box where you can specify the image file types that SmartSaver should scan for in the folder/subfolders selected.

4	Click the Browse button to locate the root folder that contains your web site.

Note: To have SmartSaver Batch process images without opening them individually, select the Auto batch processing option, and then specify how it should save the files (to the same folder as the source files, to a different folder, or into a subfolder labeled 'images' within the selected folder or original file's folder). Otherwise, SmartSaver will open for each file selected and prompt you for optimization, slice and map options as well as where to save.

5	Click the Options tab to switch to the batch processing options.

6	Select a preset and file type under Optimizer options.

Tip: Select Auto Detect option to let SmartSaver automatically select an optimization preset that matches the original file type of the image files.

7	Under the Slice options, define how you want your image cut apart, if at all.

8	Select the Resample option if you want to resample the images as they are batch processed.

9	Click OK to begin.

Click here for details about the Batch Process dialog box.

Note: You can save file lists if optimizing By files (where you specify the files, not the folders, that you want to optimize). Once you've selected your files, click the Save File Set button. Later, if you want to optimize the same files again with different settings, click the Load File Set button to open the previously saved list.

  Related Topics


Customizing your working environment

SmartSaver is designed to give you the flexibility you require when working with your web images, and as such lets you customize your work environment. Below are some ways you can go about this:

Set the default Page Background color in Preferences. If you're working with a lot of files that you want to share the same background color when you apply a transparency, then set the color in Preferences to apply it every time. Click here to see how it's done.

Use Optimization Presets and Preferences to have the same optimization settings load by default every time you run SmartSaver. Click here to see how it's done.

Arrange the SmartSaver program window to fit your work habits. Each of the toolbars and panels can be removed from the main program window and floated. Simply click on the one you want to float and drag it. To re-attach it, drag it back into the main program window. You can also hide any toolbars or panels you infrequently use by selecting the View: Toolbars - toolbar name menu command.

Resize the main window or most of the dialog boxes to optimize your screen real estate or to make working with images easier. In most dialog boxes, such as the Crop or Resample dialog boxes, you can drag any of the dialog box corners to resize it.

Open the program to the same default mode each time you run SmartSaver. You needn't always start on the Slicer tab when you open the SmartSaver program window. You can customize it to open on the tab of your choice whenever the program runs. Click here to see how it's done.

  Related Topics


Supported file formats

SmartSaver allows you to open the following file formats and output them as web-ready images:

001, ANI, BMP/RLE/UPI, CLP, CUR, DCS, DCX, EPS, FAX, FPX, GIF, ICO, IFF, IMG, JPG/JPEG, JPE, MAC, MSP, PBM, PCD, PCT, PCX, PGM, PIC, PNG, PPM, PSD, PXR, RAS, SCI, SCT, SHG, TGA, TIF and WMF.

You can output images in any of the 3 most commonly used web image file formats:

GIF, JPG and PNG.

When SmartSaver generates your web-ready images, it also creates an associated HTML file containing all of the necessary code for linking the images to your web pages. All HTML conforms to the W3C HTML 4.0 standard.

  Related Topics


HTML basics - Tables

The following is a summary of the primary HTML 4.0 table code. This is the code used to reconstitute sliced images when viewed on your web pages.

<TABLE>…</TABLE>
The opening and closing tags to delineate a single table. All other code either falls between these two tags or within them as attributes. The <TABLE> tag can take the following attributes: Width, which defines how wide the table as a whole is; Height, which defines the table's height; and Border, which defines the thickness of the table border. Values may be specified as number of pixels (i.e. border="35").

<TR>…</TR>
Defines a single row in the table. All table cells that occur on this row have their tags placed between them.

<TD>…</TD>
Defines a single table cell. These tags fall between the opening and closing row tags. The <TD> tag can take the following attributes: Width, which defines how wide the individual cell is; Height, which defines the cell's height; and Border, which defines the thickness of the cell's border. Values may be specified as number of pixels (i.e. border="35").

For more information on HTML 4.0 table code, please visit the World Wide Web Consortium at: http://www.w3c.org

  Related Topics


HTML basics - Image maps

The following is a summary of the primary HTML 4.0 client-side image map code. This is the code used to create interactive hotspots on your web page images.

<MAP>...</MAP>
This defines the client-side image map to be used with any image which contains the usemap attribute in its <IMG SRC> tag. All the map coordinates code falls between these two tags. All map tags must have the attribute name="map name" attribute in the first of the pair, where map name corresponds to the name in the <IMG SRC> usemap attribute. Otherwise, the map won't function.

<AREA>
These tags fall between the two map tags and don't require a closing counterpart like most other tags do. A single <AREA> tag defines a single hotspot within an image map, and it takes the following attributes: Shape, which tells the browser the basic hotspot shape; Coords, which gives the browser the hotspot coordinates within the image; Href, which defines the target URL for the hotspot to open; Target, which defines the target frame in which to open the URL; and ALT, which is the text that appears when a user mouses over the hotspot.

For more information on HTML 4.0 image map code, please visit the World Wide Web Consortium at: http://www.w3c.org

  Related Topics


HTML basics - Image embedding

The following is a summary of the primary HTML 4.0 image embedding code. This is the code used to place images within your web pages.

<IMG>
This is the basic tag used to link an image to your web page. Without it, there is no way to display the image. It can take the following attributes: Src, which defines the image source and location; ALT, which gives the image alternate text that appears if the image fails to load or if the person viewing your web page has images disabled in their browser; Border, which defines the border around the image if it is 'hot'; Use map, which tells the browser to reference the named map in order to create hotspots on the image; and Width and Height, which tells the web browser to reserve that much space on the page for the image before it downloads.

For more information on HTML 4.0 image embedding code, please visit the World Wide Web Consortium at: http://www.w3c.org

  Related Topics


Zooming in and out

You can zoom in and out on an image the following ways:

Press either the + or - keys on your keyboard's numeric input pad.

Click either the Zoom-in or Zoom-out icons on the standard toolbar.

Click the View: Zoom-in or View: Zoom-out menu commands.

  Related Topics


Copying and pasting cell attributes

To copy a sliced cell's attributes (URL, target and alt text):

1	In Slicer mode, select the cell with attributes you want to copy.

2	Click the Edit: Copy cell attributes menu command or click the Copy button on the standard toolbar.

To paste copied attributes to another cell:

1	Select the cell to which you want to paste the previously copied cell attributes.

2	Click the Edit: Paste cell attributes menu command or click the Paste button on the standard toolbar.

  Related Topics


Duplicating cell attributes

Using the Duplicate command, you can copy and paste a cell's attribute across a specified range of cells in a few quick steps.

To duplicate cell attributes:

1	Click the Edit: Duplicate cell attributes menu command or click the Duplicate Cell Attributes button on the Standard toolbar to open the Duplicate dialog box.

2	Select the cell with the attributes that you want to copy from the Source cell drop down menu.

3	Select the Destination cells by clicking on them (or select the Apply to all cells option to copy to every sliced image cell).

4	Select the attributes you want to duplicate.

5	Click OK. The source cell's attributes are copied to all of the selected destination cells.

  Related Topics


Previewing images

To preview your work on the fly:

Click the Preview [F8] tab to preview all of your work right inside SmartSaver if you are using either Windows 98 or Internet Explorer 4.x.

Click either the Microsoft Internet Explorer or Netscape Navigator icons [image] on the standard toolbar to preview your work in either of those two browsers (they must be installed on your computer for this to work). You can also use the Custom Preview button to open the image(s) in the browser of your choice, as defined in Preferences.

  Related Topics


Resizing images

To resize an image:

1	Click the Format: Resample menu command to open the Resample dialog box.

2	Select Current image to resize the image you are currently working or the Original image option to resize the image as it was before you made any modifications.

3	Select the Keep aspect ratio to maintain the relative height-width proportions of the image as it is resized.

4	Enter the amount you want to resize the image.

5	Select the Resample method you want to use. Normal resizes the image with no color remapping - while this is often adequate, the resample quality is not quite as good as it could be. Fine resizes the image and remaps a certain percentage of the colors, giving a higher quality resample - some may find that the color remapping damages the integrity of the image, however. Superfine produces the best results for resizing, but also introduces the possibility of significant color remapping, which could adversely affect the integrity of the image being resized.

5	Click OK.

  Related Topics


Cropping images

To crop an image:

1	Click the Format: Crop menu command to open the Crop dialog box.

2	Select Current image to crop the image you are currently editing, or select the Original image option to crop the image as it was before you made any modifications.

3	Use the bounding box in the workspace to specify the portion of the image that you want to retain.

4	Click OK.

  Related Topics


Change background or preview colors

To change the background or preview colors on the fly:

1	Click the Format: Page Background menu command. The Page Background dialog box opens.

2	Specify the color you want to use.

3	Click OK.

To change the default background or preview colors:

1	Click the File: Preferences menu command. The Preferences dialog box opens.

2	Click the Page Background tab.

3	Specify the color you want to use.

4	Click OK.

  Related Topics


Emphasizing portions of an image

When optimizing in SmartSaver, you can select specific portions of an image to apply higher quality settings. This lets you create lower resolution settings for areas that are de-emphasized - this further reduces the file size while maintaining a significantly higher level of quality for the emphasized area.

1	Go to the Optimizer mode, and click the Emphasize Area tab.

2	Select a tool to create the area you want to emphasize. For more details concerning each tool, click here.

3	If you intend to save the image as a JPG, enter the Increase JPG Quality value. This applies the value you enter as a percentage of the Quality setting selected on the JPG Properties panel to the non-emphasized areas, applying the full Quality setting only to the emphasized portions of the image. If you intend on saving as a GIF or PNG, then enter a Reserved Colors value. This reserves the specified percentage of the GIF or PNG's global palette to be used exclusively for colors found in the emphasized area.

4.	If you use the Magic Wand tool to select an area based on color similarity, select a Similarity value. The higher the value, the greater range of colors are selected.

  Related Topics


Saving images

In SmartSaver, there are a few options for saving your work – use the standard Save procedure, save your work as HTML, or save files to a Favorites folder.

Save - This saves your work as it currently exists within SmartSaver Pro. This only saves the current image. If an image has been sliced, image mapped or JavaScripted, your image will be directly forced to saved as HTML format. And the image file(s) will be saved to the subfolder - 'image'.

Save HTML - Saves images and any associated HTML from Slice, Image Mapping and JavaScript Rollovers. Image slices are saved to a sub-folder by default.

Save to Favorites – Functions as the normal Save command, but saves your work to the currently selected Favorites folder (displayed on the standard toolbar).

  Related Topics


Saving slice and image map data
Exporting and importing Slicer, JavaScript and Image map data

Whenever you work in Slicer or Image mode, you can save your work as proprietary SmartSaver files (*.uss, *.usj and *.usm) and then import them later to re-use. By default, this function also saves all associated HTML information.

1	In Slicer mode, draw your lines. In JavaScript mode, set up your Rollover data. In Image Map mode, create your hotspot areas.

2	Click the File: Export - Slicer Data; Export: JavaScript Data or Export: Image Map Data to save the information. (To import the data files again, click the File: Import - Slicer Data; File: Import - JavaScript Data or File: Import - Image Map Data menu commands respectively.)

Note: If you import Image Map Data into an image that has dimensions that do not match the original image, then the hotspots are cropped to the fit the new image. To export the pure HTML code in a useable format when working between SmartSaver and an external HTML editor, use the Edit: Copy HTML Code menu command.

  Related Topics


Setting the default background color

1	Click the File: Preferences menu command. The Preferences dialog box opens.

2	Click the Page Background tab.

3	Set the Default background and preview color settings. You can set a custom color by selecting the User defined color option.

4	Click OK.

  Related Topics


Setting the default optimization presets
Setting the default optimization format

1	Click the File: Preferences menu command. The Preferences dialog box opens.

2	Click the Optimizer tab.

3	Set the default optimization.

4	Click OK.

  Related Topics


Setting the default preset options

1	Click the File: Preferences menu command. The Preferences dialog box opens.

2	Click the Presets Manager tab.

3	Select your desired default preset on the preset list for the following three modes: JPG, GIF, PNG.

4	Click on Set as default button.

  Related Topics


Opening to a default mode at startup

1	Click the File: Preferences menu command. The Preferences dialog box opens.

2	Click the General tab.

3	Select the default startup tab from the drop down menu.

4	Click OK.

  Related Topics


Updating HTML Table
Updating an HTML file

This command lets you update the image files in a previously created HTML file in SmartSaver with the settings in the currently opened project. No need to copy and paste the cell attributes to HTML files. And there will be only the image and belonging attributes will be updated to it.

1	Click the File: Update HTML menu command.

2	In the dialog box that appears, enter the file name or select one in the file window.

3	Select Output absolute position to HTML if you want the image appear at a fixed position when viewed in a web page.

4	Select options to save image and audio files separately in a subfolder if desired.

  Related Topics


<Table>...</Table> example:

<html>

<head><title>Sample Table code</title></head>

<body bgcolor="black" text="white">

<TABLE width="65%" border="7">

<tr><td>This is your table</td></tr>

</TABLE>

</body></html>


<TR>...</TR> sample code
<TR>...</TR> example:

<html>

<head><title>Sample Table code</title></head>

<body bgcolor="black" text="white">

<table>

<TR><td>This is the first row in your table</td></TR>

</table>

</body></html>


<TD>...</TD> sample code
<TD>...</TD> example:

<html>

<head><title>Sample Table code</title></head>

<body bgcolor="black" text="white">

<table>

<tr><TD width="45" height="91" border="0">This is the first table cell</TD></tr>

</table>

</body></html>


<MAP>...</MAP> example:

<html>

<head><title>Sample Map code</title></head>

<body bgcolor="black" text="white">

<IMG SRC="images\guide1x1.jpg" WIDTH=124 HEIGHT=141 BORDER=0 ALT="images\guide1x1.jpg" USEMAP="#guide1x1">

<MAP NAME="guide1x1">

<AREA SHAPE=rect COORDS="77,31,120,65" HREF="http://www.webutilities.com" TARGET="_blank" ALT="WebUtilities.com">

<AREA SHAPE=rect COORDS="43,91,101,128" HREF="http://www.metallica.com" TARGET="_parent" ALT="Metallica Fan Club">

</MAP>

</body></html>


<AREA> example:

<html>

<head><title>Sample Map code</title></head>

<body bgcolor="black" text="white">

<IMG SRC="images\guide1x1.jpg" WIDTH=124 HEIGHT=141 BORDER=0 ALT="images\guide1x1.jpg" USEMAP="#guide1x1">

<MAP NAME="guide1x1">

<AREA SHAPE=rect COORDS="77,31,120,65" HREF="http://www.webutilities.com" TARGET="_blank" ALT="WebUtilities.com">

<AREA SHAPE=rect COORDS="43,91,101,128" HREF="http://www.metallica.com" TARGET="_parent" ALT="Metallica Fan Club">

</MAP>

</body></html>


<IMG> example:

<html>

<head><title>Sample Image Embedding code</title></head>

<body bgcolor="black" text="white">

<IMG SRC="images\guide1x1.jpg" WIDTH=124 HEIGHT=141 BORDER=0 ALT="images\guide1x1.jpg">

</body></html>


Creating transparencies

To create transparent colors:

1	Open an image that you intend to save as either an Indexed 256 color GIF or Indexed 256 color PNG (True Color images don't support this feature.)

2	Go to the Optimizer mode, and click the Mask Options tab.

3	Select the Pick color option. Using the color picker, select the color you want to make transparent. This keys out all pixels that have that color value. If you want to select a range of colors in the same region, select the Adjacent color only option and then enter a color Similarity value. All colors that touch one another falling within that range of similarity are selected. If you want to use the color picker to fade a color to blend with the background (instead of making the color completely transparent, enter a value for Fading.
Note: You can import an image mask from a file by clicking the Import from file button on the tab. This creates a transparent region based on the light and dark regions within the imported image file, where lighter areas are retained and darker areas are made transparent.

4	If you export images from Photoshop to SmartSaver, you can click the select Import Mask from Plug-in Layer to use transparency layers from images.

  Related Topics


Standard Toolbar

This toolbar contains shortcuts for the most frequently used menu commands. For information on what each button/command does, click one of the buttons below:

This toolbar can be docked either vertically or horizontally in the main program window. Simply drag it from its current position and place it the new position. The toolbar can also be set to float over the user interface.

  Related Topics


Tools Toolbar

This toolbar contains tools for working in the Slicer, JavaScript, Image Map, and Optimizer panels. Different tools are available, depending on the panel that you are working in. For information on what each button does, click one of the buttons below:

This toolbar can be docked either vertically or horizontally in the main program window. Simply drag it from its current position and place it the new position. The toolbar can also be set to float over the user interface.

  Related Topics


Properties panel, (Slicer)
Properties panel (Slicer)
 Slicer	 JavaScript	 Image Map	 Optimizer(JPG) (GIF) (PNG)

The Slicer Properties panel gives you control over the HTML tags associated with a particular sliced image cell. Sliced cells can be created across image map hotspots. The tags are:

Preset - Presets can be displayed on the list if you saved your work in advance.  The order of all presets can be specified on the Preset Manager tab of the Preferences dialog box.

Optimizer - Sets the default image file format to be applied to this cell when it's processed by the SmartSaver Optimizer. The options are: GIF, JPG, and PNG. You can also select an Optimizer preset from the drop-down menu.

URL - Defines the location opened when a user clicks on the cell. Note: This makes the entire cell 'hot', with the 'border' tag attribute set to '0' by default.

Target Sets the target frame for the above URL.  Choose one of the following four types of options:

_blank loads the linked document in a new, unnamed browser window.

_parent loads the linked document in the parent frameset or window of the frame in which the link is contained. If the frame containing the link is not nested, then the linked document loads into the full browser window.

_self loads the linked document in the same frame or window as the link. This target is implied, so you usually don't have to specify it.

_top loads the linked document in the full browser window, thereby removing all frames.

Alt - Creates a description attribute in the image cell tag; when the image loads, this is the first thing that users see (or in the case of non-graphical browsers, this is the only the user sees). It is good HTML coding practice to always include an ALT attribute in your <IMG SRC> tag.

Import Slicer Data - Opens an Ulead Slicer Data file containing previously saved slicer information (*.uss). Once the data is loaded, all sliced lines are replaced by the ones defined in the data file.

Export Slicer Data - Exports the current slicer information to an Ulead Slicer Data file (*.uss). This file can be re-opened when working in Slicer mode.

Erase All Sliced Lines - Clears all the current lines in the edit window.

Show/Hide Image Map Areas - Toggles the visibility of any existing image map areas. This is disabled if there are no image map areas.

  Related Topics


Color Palette

This panel contains all of the colors available to you when working in GIF or PNG Optimizer. Mouse over any location in the image to see which color in the palette it is and view its associated RGB information. Also available in the Color palette are a variety of tools that allow you do edit, arrange and save colors.

Click the color cells and buttons on the panel to find out more about each of them.

  Related Topics


Color Cell

Displays all the colors contained in the image. Click directly on a color cell to edit it, using the editing tools on the right. Color cells may display different indicators on different corners of the square. Click the buttons on the right panel for details.


Lock Color

Ensures that a color remains in the palette, even if you change palette settings on the Optimizer panel. An indicator on the lower right means that the color has been locked [image]. Once a color has been locked, select that color cell, then click this again to unlock it.


Replace Color

Replaces the selected color with the color that is displayed in the [working color] window. If this color has been replaced or edited, an indicator will be on the lower left side of the cell. .


Snap to Web Safe Color

 	Converts the selected color to its nearest web-safe color. An indicator on the top middle of the cell and lower left means that the color is web safe [image].


Add Color

Adds the current working color to the palette.


Delete Color

Removes the selected color from the palette.


Save Palette

Saves the current color palette to a file (*.pal), which you can use again at a later time.


Load Palette

Opens a color palette file (*.pal) that has previously been saved.


Create Gradient Palette

Converts three or more selected color cells according to a gradient of your choice. The original colors of the image will be remapped to the new gradient colors, affecting the appearance of the image. After the selected color cells have been re-mapped, there will be an indicator on the lower left on those cells [image].


Sort Palette Colors

Lets you reorganize the entire color palette according to various criteria: RGB values, Hue, Saturation, or Brightness. This does not remap colors in the image, meaning that the colors in the image remain unchanged.


Remove Locks and Edits

Removes all Lock and Edit indicators from color cells by unlocking color cells, removing added cells, and returning edited cells to their original colors. Colors that have previously been deleted by you will not be restored to the palette.


Working Color

Displays the color selected from the original image or the Windows Color dialog box. To select a color from the original image, simply click directly on an area of the original image in the workspace. To select a color from the Windows Color dialog box, click on the current working color, then select a color in the dialog box that appears.


Frames and Cells panel

Contains all frame and cell information for the current project. Different options are available, depending on the panel that you are working in.

Frame – Displays the frame that you are currently editing. This is useful if you are working with animated GIFs. You can use either the dropdown list or the scrolling buttons to select a different frame.

Current cell – Lists all the cells contained in a sliced image, and highlights the currently selected cell. Switch to a different cell by selecting a different cell in this panel. You can also click directly on the image in the workspace to select a cell.

Cell property – Displays information on the name, size, and position of the image in the selected cell (for sliced images only). Allows you to change the name of individual cells.

Load image – Allows you to insert an image into the selected cell. If your image is larger than the selected cell, you can click the Snap Cell to Load Image button to change the image to its original size and resize the cells accordingly.

Image type – When in the Optimizer Panel, this lets you select either the main image, cell background, table background or the rollover image to optimize.

Rollover event – In the Optimizer Panel, if you selected Rollover Image as the Image Type, this lets you select from the various events that you’ve set for that particular cell. The Rollover cells panel then displays the image(s) that the event calls. Select an image in the panel to optimize it.

  Related Topics


Status bar

Located at the bottom of the program window, this displays pertinent information as you work in SmartSaver. You can turn this off and on by clicking the View: Status Bar menu command.

  Related Topics


Properties panel, Image Map
Properties panel (Image Map)
 Slicer	 JavaScript	 Image Map	 Optimizer(JPG) (GIF) (PNG)

The Image Map Properties panel gives you control over the HTML tags associated with a particular hotspot inside the image. Hotspots can be mapped across sliced cells. The tags are:

Preset - Presets can be displayed on the list if you saved your work in advance.  The order of all presets can be specified on the Preset Manager tab of the Preferences dialog box.

URL - Defines the location opened when a user clicks on the hotspot.

Target - Sets the target frame for the above URL. Choose one of the following four types of options:

_blank loads the linked document in a new, unnamed browser window.

_parent loads the linked document in the parent frameset or window of the frame in which the link is contained. If the frame containing the link is not nested, then the linked document loads into the full browser window.

_self loads the linked document in the same frame or window as the link. This target is implied, so you usually don't have to specify it.

_top loads the linked document in the full browser window, thereby removing all frames.

Alt - Creates a description attribute in the hotspot tag. Note: this tag is usually over-ridden by the <IMG SRC> 'alt' attribute in certain browsers.

Similarity – Sets the similarity of color pixels that are selected when using the Magic Wand to create an image map. This is useful for selecting areas of solid or similar colors.

Import Image Map Data - Opens an Ulead Image Map Data file containing previously saved hotspot/mapper information. Once the data is loaded, all mapped areas are replaced by the ones defined in the data file.

Export Image Map Data - Exports the current hotspot/mapper information to an Ulead Image Map Data file. This file can be re-opened when working in Image Map mode.

Add an Area Based on Transparency - Uses the current transparency settings to create a polygonal hotspot.

Add an Area Based on Image File Mask - Creates an irregular hotspot based on the mask generated from an imported file (where dark areas are not used but the light areas are when creating the hotspot).

Erase All Mapped Areas - Clears all the current hotspots in the edit window.

Show/Hide Sliced Lines - Toggles the visibility of any existing slicer lines. If there are no slicer lines, then this is disabled.

  Related Topics


Properties panel, Optimizer - GIF, Optimizer tab
Properties panel (Optimizer – GIF, Optimizer tab )
 Slicer	 JavaScript	 Image Map	 Optimizer (JPG) (GIF) (PNG)

The Optimizer Properties panel gives you access to all of the controls associated with a particular web file format. Each of the three formats available has their own custom controls. The formats available are: JPG, GIF, and PNG.

File Type - Sets the image data type for the file. Indexed allows up to 256 distinct colors while Grayscale only allows up to 256 distinct shades of black, white and gray.

Preset - Lets you select a previously saved options file from the drop down menu. Options Presets are created whenever you customize the file format settings and then click the Save button next to this menu.

Remove Redundant Pixels – Deletes pixels that are repeated between image layers, thus reducing file size.

Interlace - Allows the image to gradually fade in when loaded in the web browser. This is useful giving users a preview of the image while waiting for it to complete downloading.

Palette - Determines how the color palette is built. Optimized creates the best palette for images that originally had more than 256 colors as it samples from the most commonly occurring colors and uses those, where as Web 216 is good for line art and text and uses only colors guaranteed to be available in any web browser. Original applies the color palette from the original image. User Defined allows you to load a previously saved color palette to use with the current image in the edit window.

Colors/Shades - Sets a limit on the number of colors the color palette contains. You can enter a value from 2 to 256. For Grayscale images this limited to shades of gray between absolute white and absolute black.

Dither - Mixes the colors from the color palette in various combinations to create the illusion of colors that are non-existent in the palette. This is especially useful when you are converting an image from 16-, 24-, or 48-bit color dep th (each of which is capable of possessing thousands of colors, even millions) to a 256 color palette. You may drag the pop slider besides the edit box to determine the percentage that your image will be dithered. The higher rating you apply, the larger the file size.

Normal / Advanced mode- Allows you to toggle between Normal and Advanced mode. Switch to Advanced mode for further optimization settings.

Compress by Size -Allows you to compress the image based on either a target file size or an overall compression ratio. Only available in Normal mode.

Advanced mode contains the following settings:

•	Method - Choose from two optimization engines to create a Global Palette: Median Cut and Minimum Variance.  Median Cut Engine generates a master palette containing all the most commonly used colors sampled from each image layer. This removes redundancies and merges similar colors in order to produce a highly compact animation file which the size could be smaller compared to Minimum Variance. But the quality will be poor compared to the one before optimization process. Minimum Variance generates a master color palette with the way that minimize the color difference between original image and compressed file. In another way to put it, the quality of the image remains almost the same, but the file size after optimization will not be reduced by as much as optimizing with the Median Cut engine.

•	Lossy – Removes pixels from the image, based on the value that you enter. The higher the value, the more pixels will be removed, and the smaller the resulting file size.

•	Soft - Sets the amount of blurring used to 'soften' the image. This is useful when you want to utilize lower quality settings to create lower file sizes as it blurs the highly defined image information and subsequently requires fewer colors to render.

•	Weight - Tells the SmartSaver Optimization engine to favor colors from a certain color channel (Red, Green, or Blue) when building the color palette. You can also set the Optimizer to sample evenly from each of the channels.

•	Web snap – Converts the current colors on the image to their nearest web-safe colors. The higher the value, the greater number of colors will be converted.

Add Comment Block – Allows you to add up the information regarding to the image file. For a GIF animation file, it creates a new comment layer. The contents and title of the comment layer can be entered or modified in the comment block. File size will be slightly increased if you perform this feature. Maximumly, you may enter 512 characters in the comment box.

  Related Topics


Properties panel, Optimizer - JPG, Optimizer tab
Properties panel (Optimizer – JPG, Optimizer tab)
 Slicer	 JavaScript	 Image Map	 Optimizer (JPG) (GIF) (PNG)

The Optimizer Properties panel gives you access to all of the controls associated with a particular web file format. Each of the three formats available have their own custom controls. The formats available are: JPG, GIF, and PNG.

File Type - Sets the image data type for the file. True Color allows more than 16 million distinct colors while Grayscale only allows up to 256 distinct shades of black, white and gray, similar to GIF. JPG Grayscale images tend to be significantly smaller than GIF Grayscale due to its lossy nature.

Preset - Lets you select a previously saved options file from the drop down menu. Options Presets are created whenever you customize the file format settings and then click the Save button next to this menu.

Quality - Select a quality rating for the compression, ranging from 1 to 100. A higher value results in larger file sizes, while a lower value results in smaller file sizes.

Chroma - Select a color quality for the compression, ranging from 1 to 100. A higher value results in larger file sizes, while a lower value results in smaller file sizes.

Link Quality – Select this option to lock the ratio of the current Quality and Chroma values for the compression.

Advanced - Allows you to toggle between Normal and Advanced mode. Switch to Advanced mode for further optimization settings.

Advanced mode contains the following settings:

•	Mode - Defines the type of JPG image file created: Progressive creates an image that gradually comes into focus as it opens as well as creating a smaller file. However, some web browsers may not be able to display these images properly. Standard creates an image that will be compatible with all browsers, but images saved as Standard JPGs tend to be larger than Progressive JPGs. Standard Optimized creates the smallest possible image using a non-progressive compression mode. Sometimes using this mode can create files smaller than those using Progressive compression.

•	Subsampling - Defines how accurately each pixel in the original image should be evaluated when optimizing: select YUV411 for the smallest possible file size. Select YUV422 for good accuracy and good compression and None for the most accurate reproduction (though it tends to generate larger file sizes.) As a rule, images with no subsampling will be larger than their subsampled counterparts at the same quality levels. In general, you should be able to use lower quality settings when Subsampling is set to None.

•	Soft - Sets the amount of blurring used to 'soften' the image. This is useful when you want to utilize lower quality settings to create lower file sizes as it blurs the highly defined image information and subsequently requires less colors to render

•	Compress by Size – Allows you to compress the image based on either a target file size or an overall compression ration.

•	Add Comment Block – Allows you to add up the information regarding to the image file. The contents and title of the comment layer can be entered or modified in the comment block. File size will be slightly increased if you perform this feature. Maximumly, you may enter 512 characters in the comment box.

  Related Topics


Properties panel, Optimizer - PNG
Properties panel (Optimizer – PNG, Optimizer tab)
 Slicer	 JavaScript	 Image Map	 Optimizer (JPG) (GIF) (PNG)

The Optimizer Properties panel gives you access to all of the controls associated with a particular web file format. Each of the three formats available have their own custom controls. The formats available are: JPG, GIF, and PNG.

File Type - Sets the image data type for the file. True Color allows more than 16 million distinct colors; Grayscale only allows up to 256 distinct shades of black, white and gray; Indexed only allows up to 256 distinct colors. Because PNG is absolutely lossless, regardless of which file type you select, images have a tendency to be larger than either GIF or JPG. However, if you take time to experiment with the settings, you can generate lossless images that are, in fact, smaller, than they would be in if they were saved as a GIF or JPG.

Preset - Lets you select a previously saved options file from the drop down menu. Options Presets are created whenever you customize the file format settings and then click the Save button next to this menu.

Alpha Channel - Saves the original image's alpha channel, if it had one before being opened in SmartSaver.

Interlace - This produces an image that is progressively displayed over the Internet, with an initial low quality image being displayed almost immediately after the page loads.

Palette - Determines how the color palette is built. Optimized creates the best palette for images that originally had more than 256 colors as it samples from the most commonly occurring colors and uses those, where as Browser Safe is good for line art and text and uses only colors guaranteed to be available in any web browser. User Defined allows you to load a previously saved color palette to use with the current image in the edit window.

Colors/Shades - Sets a limit on the number of colors the color palette contains. You can enter a value from 2 to 256. For Grayscale images this limited to shades of gray between absolute white and absolute black.

Dither - Mixes the colors from the color palette in various combinations to create the illusion of colors that are non-existent in the palette. This is especially useful when you are converting an image from 16-, 24-, or 48-bit color dep th (each of which is capable of possessing thousands of colors, even millions) to a 256 color palette. You may drag the pop slider besides the edit box to determine the percentage that your image will be dithered. The higher rating you apply, the larger the file size.

Compress by Size -Allows you to compress the image based on either a target file size or an overall compression ratio. Only available in Normal mode.

Advanced - Allows you to toggle between Normal and Advanced mode. Switch to Advanced mode for further optimization settings

Advanced mode contains the following settings:

•	Filter - You may be able to squeeze a few more bytes out of an image by applying a filter to it. Filters are mathematical algorithms which can improve an image's quality while reducing its size. Use the batch button to compare the results of various filters.

•	Soft - Sets the amount of blurring used to 'soften' the image. This is useful when you want to utilize lower quality settings to create lower file sizes as it blurs the highly defined image information and subsequently requires fewer colors to render.

•	Method – Choose from two optimization engines to create a Global Palette: Median Cut and Minimum Variance.  Median Cut Engine generates a master palette containing all the most commonly used colors sampled from each image layer. This removes redundancies and merges similar colors in order to produce a highly compact animation file. But the quality will be poor compared to the one before optimization process. Minimum Variance generates a master color palette by choosing the color that occupies the biggest portion in an image layer. The quality of the image remains almost the same, but the file size after optimization will not be reduced by as much as optimizing with the Median Cut engine.

•	Weight - Tells the SmartSaver Optimization engine to favor colors from a certain color channel (Red, Green, or Blue) when building the color palette. You can also set the Optimizer to sample evenly from each of the channels.

•	Web Snap - Converts the current colors to their nearest web-safe colors. The higher the value, the greater number of colors will be converted.

•	Add Comment Block – Allows you to add up the information regarding to the image file. The contents and title of the comment layer can be entered or modified in the comment block. File size will be slightly increased if you perform this feature. Maximumly, you may enter 512 characters in the comment box.

  Related Topics


Properties panel, JavaScript
Properties panel (JavaScript)
 Slicer	 JavaScript	  Image Map	 Optimizer(JPG) (GIF) (PNG)

The JavaScript Properties panel allows you to take a sliced image cell and assign "Rollover" images to it.  Just as the Slicer panel, it also gives you control over the HTML tags associated with a particular sliced image cell.

Preset - Presets can be displayed on the list if you saved your work in advance.  The order of all presets can be specified on the Preset Manager tab of the Preferences dialog box.

Optimizer - Sets the default image file format to be applied to this cell when it's processed by the SmartSaver Optimizer. The options are: GIF, JPG, and PNG. You can also select an Optimizer preset from the drop-down menu.

URL - Defines the location opened when a user clicks on the cell. Note: This makes the entire cell 'hot', with the 'border' tag attribute set to '0' by default.

Target - Sets the target frame for the above URL.  Choose one of the following four types of options:

_blank loads the linked document in a new, unnamed browser window.

_parent loads the linked document in the parent frameset or window of the frame in which the link is contained. If the frame containing the link is not nested, then the linked document loads into the full browser window.

_self loads the linked document in the same frame or window as the link. This target is implied, so you usually don't have to specify it.

_top loads the linked document in the full browser window, thereby removing all frames.

Alt - Creates a description attribute in the image cell tag; when the image loads, this is the first thing that users see (or in the case of non-graphical browsers, this is the only the user sees). It is good HTML coding practice to always include an ALT attribute in your <IMG SRC> tag.

Import JavaScript Data - Opens an Ulead JavaScript Data file (*.usj) containing previously saved JavaScript information. Once the data is loaded, all JavaScript settings are replaced by the ones defined in the data file.

Export JavaScript Data - Exports the JavaScript settings information to an Ulead JavaScript Data file (*.usj). This file can be re-opened when working in JavaScript mode.

Erase All Sliced Lines - Clears all the current lines in the edit window.

Show/Hide Image Map Areas - Toggles the visibility of any existing image map areas. This is disabled if there are no image map areas.

  Related Topics


Open, menu command
Open

Opens an image from a file: File formats supported include the listed below:

001, ANI, BMP/RLE/UPI, CLP, CUR, DCS, DCX, EPS, FAX, FPX, GIF, ICO, IFF, IMG, JPG/JPEG, JPE, MAC, MSP, PBM, PCD, PCT, PCX, PGM, PIC, PNG, PPM, PSD, PXR, RAS, SCI, SCT, SHG, TGA, TIF and WMF among others.

Note: SmartSaver Pro now support multi-layer PSD files.


Open from clipboard, menu command
Open from Clipboard

Opens any image data currently being stored in the Windows Clipboard.


Batch process, menu command
Batch Process

Opens the Batch Process dialog box allowing you to optimize, slice and resample the contents of an entire folder.


Organize Favorites, menu command
Organize Favorites

Allows you to re-arrange the order of your Favorites folders already created or to create new ones and remove the ones which is no longer needed.


Import, menu command
Import

Allows you to import previously saved SmartSaver Slicer Data, JavaScript Data and Image Map Data. Imported data is immediately applied to the current project.


Export, menu command
Export

Allows you to export your work in various formats. You can save Slicer Data, JavaScript Data and Image Map Data in the proprietary SmartSaver format.


Preferences, menu command
Preferences

Opens the Preferences dialog box, allowing you to customize how you work with SmartSaver.


Undo/Redo, menu command
Undo/Redo

Undoes/Redoes previous actions. The maximum number of Undo's allowed is 50.


Copy cell attributes, menu command
Copy Cell Attributes

Copies the current image cell settings.


Paste cell attributes, menu command
Paste Cell Attributes

Pastes copied image cell settings to the selected cell.


Copy HTML code, menu command
Copy HTML Code

Copies all of the HTML code associated with the project.


Erase all sliced lines, menu command
Erase All Sliced Lines

Removes all lines created in the Slicer mode, resetting the image back to its original state.


Erase all mapped areas, menu command
Erase All Mapped Areas

Removes all mapped areas created in the Image Map mode, resetting the image back to its original state.


Previous frame, menu command
Previous Frame

When working with an animation file, this loads the previous frame into the workspace.


Next frame, menu command
Next Frame

When working with an animation file, this loads the next frame into the workspace.


Previous cell, menu command
Previous Cell

Loads the previous sliced image cell into the workspace.


Next cell, menu command
Next Cell

Loads the next sliced image cell into the workspace.


Slicer, menu command
Slicer

Switches SmartSaver to Slicer mode.


JavaScript, menu command
JavaScript

Switches SmartSaver to JavaScript mode.


Image Map, menu command
Image Map

Switches SmartSaver to Image Map mode.


Optimizer, menu command
Optimizer

Switches SmartSaver to Optimizer mode.


Preview, menu command
Preview

Switches SmartSaver to Preview mode. This feature is disabled if neither Windows 98 nor Internet Explorer 3.x are installed.


Actual view, menu command
Actual View

Returns the workspace to 1:1 view.


Zoom-in, menu command
Zoom-in

Zooms in on the workspace.


Zoom-out, menu command
Zoom-out

Zooms out on the workspace.


Standard toolbar menu command
Standard Toolbar

Displays or hides the Standard toolbar


Tools toolbar, menu command
Tools Toolbar

Displays or hides the Tools toolbar.


Frames and Cells, menu command
Frames and Cells

Displays or hides the Frames and Cells panel.


Properties, menu command
Properties

Displays or hides the Properties panel.


JavaScript, menu command
JavaScript

Click to switch to the JavaScript tab to set up a rollover event.


Color Palette, menu command
Color Palette

Displays or hides the Color Palette.


Status bar, menu command
Status bar

Displays or hides the Status Bar.


Cell Properties, menu command
Cell Properties

Displays information about the cell, its background color or image, and the image loaded in the cell.


Page Background, menu command
Page Background

Opens the Background dialog box, allowing you to select the default background used when creating a transparency (this color or image does not appear in transparent GIFs or PNGs but does appear when masking JPEGs) as well as the background color in the Preview tab.


Crop, menu command
Crop

Opens the Crop dialog box, allowing you to cut away unwanted portions around the image perimeter.


Resample, menu command
Resample

Opens the Resample dialog box, allowing you to re-size the image.


Slice evenly, menu command
Slice Evenly

Opens the Slice Evenly dialog box, allowing you to create evenly sliced columns and rows.


Table Properties, menu command
Table Properties

Displays information about the background image of the table as well as its dimensions.


Help, menu command
Help

Opens the Online Help.

You can also access help topics by:

Clicking the Help button on the Standard toolbar and then clicking on the item of interest.

Pressing the F1 key when a menu command is under your mouse pointer.


Getting started, menu command
Getting Started

Opens the Getting Started topic in the Online Help.


About, menu command
About

Opens the About box, displaying information regarding the program as well as your product serial number.


Workspace

The workspace consists of 5 tabs and an edit window. When you click one of the tab buttons, the edit window and Properties panel change accordingly to match the mode you are working in. All work done in any other mode is carried over to the new mode when you switch.

Slicer - Cut your image into smaller portions so that parts of it download more quickly when users hit the web page it's embedded within. SmartSaver automatically generates the appropriate table code so that when the sliced images are placed into your web page, their integrity is maintained.

JavaScript - Create attractive and sophisticated JavaScript rollover events for buttons and anything you can imagine. You don't need to write a single line of code to take advantage of this feature.

Image Map - Use the image map tools in this mode to create user-clickable hotspots inside your image. These hotspots can be created using any of the shape tools, or you can import image masks to automatically create hotspots around specific objects or portions of the picture.

Optimizer - Smart-save your images by making them as compact as possible without sacrificing quality. The Optimizer mode lets you save in any of the 3 most common web file formats (GIF, JPG, and PNG), giving you access to the full range of options available to each. This workspace splits into two panes when working in the Optimizer mode. The left pane is the source image, cell, or frame, and the right pane is the current image, frame or cell with all Optimizer options applied.

Preview - This mode is only available if you are using Windows 98 or Internet Explorer 3+. It allows you to preview your image/HTML integration directly within the SmartSaver program window saving you the hassle of having to switch back and forth.

  Related Topics


Pick Tool

When working in Slicer, JavaScript or Image Map mode, this tool lets you select a specific sliced line or mapped hot spot.


Draw Line

In Slicer mode, this tool lets you cut your image apart.


Erase
Erase Line

In Slicer mode, this tool lets you erase specific lines.


Draw Rectangular Hotspot

In Image Map mode, this tool lets you create rectangular hotspots.


Draw Circular Hotspot

In Image Map mode, this tool lets you create circular hotspots.


Draw Polygonal Hotspot

In Image Map mode, this tool lets you create polygonal hotspots.


Magic Wand Tool

In Image Map mode, this tool lets you create a polygonal hotspot based on similar colors. Press the Ctrl key to automatically invert the selection as it's made. You can adjust the Similarity value in Preferences or in the Properties panel.


Program map

Click on a region below to find more information:

  Related Topics


Recent file
Recent files

List of most recently worked on files; click one to open it.


Exit

Closes SmartSaver, prompting you to save any unsaved work.


Save web images & exit
Save & Exit

Saves your work along with the associated image file and closes SmartSaver.


Exit without save
Exit Without Saving

Closes SmartSaver without saving your work.


Duplicate Cell Attributes

Copies the selected cell's attributes to the cells you specify.


Order Now!

Opens the purchase page for SmartSaver at the Ulead website.


What's new, menu command
What's New

Opens the What's New help topic.


Online Tutorials, menu command
Online Tutorials

Opens the SmartSaver online tutorials at the Ulead website.


Show image map areas, menu command
Show Image Map Areas

Displays the image map hotspots while working in Slicer mode.


Add Area Based on Image File Mask

Allows you to import a mask from an image file to use as your hotspot area.


Add Area Based on Transparency

Allows you to create a hotspot based on your transparency selections.


Show Sliced Lines

Displays the sliced lines while working in Slicer mode.


Hide
Show/Hide Original Image

Shows or hides the original image when working in Optimizer mode.


Save

Saves your image as it currently exists within SmartSaver Pro.

Note: If you have already sliced your image Slice Mode; create the Rollover events in JavaScript tab or set the background for your cell or table, this command will directly save your image as HTML format. And the image file(s) will be saved to the subfolder - 'image'.


Save As

Saves the current image as a new specified file name.

Note: If you have already sliced your image Slice Mode; create the Rollover events in JavaScript tab or set the background for your cell or table, this command will directly save your image as HTML format. And the image file(s) will be saved to the subfolder - 'image'.


Save HTML

Saves images and any associated HTML from Slicer, Image Mapping and JavaScript Rollovers. Click the Output absolute position to HTML if you want to save the position of the image as specified in Full Screen Mode. Select further options if you want to automatically organize image slices and audio files to separate subfolders.


Add to History

Adds the image with the current optimization settings to the History window.


Show History

Opens the History window, displaying all history images and their optimization settings.


Internet Explorer preview

Opens your work in the Microsoft Internet Explorer version 4 or above.


Navigator preview

Opens your work in the Netscape Navigator version 4 or above.


Online help

Opens the online help for whichever item you click on.

You can also access help topics by:

Clicking the Help button on the Standard toolbar and then clicking on the item of interest.

Pressing the F1 key when a menu command is under your mouse pointer.


Save to Favorites

This automatically saves the optimized files to a preset folder. The specific folder can be set up by selecting Organize Favorites command in File menu.


Favorite Folder
Favorites Folder

The folders that store your favorite works can be arranged by selecting Organize Favorites command in File menu.


Custom Browser Preview
Preview in Custom Browser

This allows you to preview you image in a browser of your choice. This is useful for making sure the JavaScript works, the tables are set up correctly for sliced images, and making sure that the colors are displayed correctly (Surprisingly, not all browsers display colors the same way!).


Resample

Resampling is a method of resizing an image to make it bigger or smaller. Click this command to open the Resample dialog box.


Ulead Homepage

This takes you to the main Ulead Systems homepage, where you can read the latest Ulead news, learn new tricks, and find out more about other great products and offers.


SmartSaver Pro Homepage

This takes you to the Ulead SmartSaver Pro homepage, where you can find samples, tutorials, news, and free downloads.


Technical Support

Launches your default Web browser and loads the Technical Support section of Ulead’s web site.


Online Registration

This will run the automatic procedure, using your Internet connection, to register your copy of SmartSaver Pro with Ulead Systems, Inc. Registration is fast, free, and highly recommended. Registration information is strictly for Ulead Systems internal use only and will allow you to take advantage of special upgrade offers.


Visual Open

Opens the Visual Open dialog box for selecting files to place in the workspace. The pane on the left displays the hierarchy of folders on your disk drive. Click a folder to display thumbnails of recognized image file types in thumbnail pane. You can also use buttons above the thumbnail pane to navigate your folders and sort the thumbnail display.


Reopen

Reloads the current image into the workspace. This updates the original image if you have modified it in another editor after initially opening it in SmartSaver. Keep in mind that all settings you have made to the current image will be lost upon reopening.


New Table

Creates a blank document with a table of your specifications. After it appears in the workspace, you can import images into the cells.


Update HTML

Allows you to modify an HTML file that you’ve previously created with SmartSaver to reflect the settings in the current project. This also updates the images associated with that HTML file, if any changes have been made.


Optimize Images in HTML Files

Optimizes images contained in a selected HTML file. In the dialog box that appears, choose a URL or an HTML file. SmartSaver then lists all the images contained in the URL or the file. Select images from this list, and then make optimization settings.


Full Screen Preview

Lets you view the image as it will appear at full screen view. Here you can modify the position of the image on the screen by dragging it. A Full Screen Toolbar appears to let you specify various preview settings, such as the position coordinates of the image as well as the color simulation for different computer environments. Click the checkmark to save the position coordinates of the image and return to the main workspace. Use these coordinates to position the image on the Web page by clicking the ABS button on the Standard Toolbar, or click the Output absolute position to HTML option in the Save HTML dialog box.


Project Information

Lists all image files included in the project and their function in the project (cell image or rollover image) and their individual file sizes. The file size for the HTML text itself is also listed, as well as the total file size of the project and its estimated download time.


Output Absolute Position to HTML

Saves the image and its associated HTML so that it is positioned on the page according to the coordinates specified by dragging the object in Full Screen Preview mode.


Animation Control

Contains options for editing basic settings in an animated GIF, including Looping and Removal Method, and Delay Time.


Add Transparent Area
Add Transparency Area

Lets you choose colors in the image that you want to be transparent.


Erase Transparent Area
Erase Transparency Area

Restores individual transparent areas of an image to their original colors.


Clear History

Removes all the previously added images from the history windows.


Load Image

Loads an image into the selected cell.


Snap Cell to Load Image Size
Snap Cell to Image

Adjusts the size of the cell to the original dimensions of the image in that cell.


Hand Tool

A tool that allows you to view each corner of your image when the image is zoomed in and exceeds the workspace.


toooo


Batch Process, File tab
Batch Process (File tab)
 Files	 Options

This tab lets you set the parameters for location of images that you want to optimize, as well as automate certain tasks for saving the final optimized image files. This makes it great for working on an entire web site offline.

Import source - Select the folder or group of files that you want to batch optimize and slice. Select By Folder, to process all images files in that folder. Select the Include sub-folders option to process all images in the subfolders of the selected folder. Select By files to choose individual files and add them to a batch list (these files do not necessarily need to be located in the same folder).

Auto batch processing – Select this option to automate the following tasks:

Output results –This group lets you define how you want to output your work. Replace original file overwrites the source image with the new, optimized version. If your image source is not GIF, JPG, or PNG, then a new image is created by default with the same name. Sliced images are named based on the original name and the sliced row and column. Output results lets you define the output location if it is different than the location of the source file.  Save image files to ‘images’ subfolder  creates a subfolder called "images" for storing the processed image files.  Do not output HTML for unsliced images will not generate HTML files during the batch process.

Naming – Allows you to append file names with a standard prefix or suffix of your choice. Click the Options button to use either the settings or the name of the optimization process as the prefix or suffix of the file names.

  Related Topics


Batch Process, Options tab
Batch process (Options tab)
 Files	 Options

This tab lets you set the parameters for optimizing and slicing images when batch processing.

Optimization - Lets you select an optimization preset to use when batch processing images. The settings of the selected preset are applied to all images. Presets are defined in Optimizer mode.

Slice - Slices all of the images processed as well as a generates corresponding HTML code. You can universally slice all images evenly or import SmartSaver Table Data and use the settings found there to slice the images. For imported table data, you can also specify to use the various optimization settings that have been used for the different cells.

Resample – Resizes all of the images in the batch by resampling with the settings that you define in this group. Keep Aspect Ratio resizes the image using its current proportions but reduces or increases it by the amount specified in the Width and Height entry boxes. Unit lets you select the unit of measurement used when resizing images. Quality lets you set the desired output quality of color remapping performed on the image files.

  Related Topics


Preferences, General
Preferences (General)
 General	 Slicer	 Image Map
 Optimizer	 Page Background	 Presets Manager
 JavaScript	 HTML Preview

The General Preferences tab lets you set up how SmartSaver works. The options are as follows:

Default startup tab - Lets you choose which tab to begin on each time you open SmartSaver.

Levels of undo - Gives you up to 50 of levels of Undo per tab. Note: The more levels of Undo you have, the more memory SmartSaver tends to use when running. For better performance keep the Undo levels between 5 and 20.

Resample quality - Select the desired output quality of color remapping performed on image files.

High color dithering - Automatically dithers your images opened in the workspace when your monitor color display is set to High Color.

Enable popup menu in Windows Explorer - Activates SmartSaver as one of the menu items when you right click over an image file in Windows Explorer. This is convenient when browsing your image folders to select specific images for optimizing, slicing or mapping.

Add Visual Open to Standard Toolbar – Adds the Visual Open button to the Standard Toolbar, so that you can conveniently search for images files by browsing their thumbnail representations, instead of browsing them individually by file name.

Alternate image path for preset - Select a folder in which to automatically store all image files in the project each time you save it.

Alternate audio path for preset - Select a folder in which to automatically store all audio files in the project each time you save it.

  Related Topics


Preferences, Slicer
Preferences (Slicer)
 General	 Slicer	 Image Map
 Optimizer	 Page Background	 Presets Manager
 JavaScript	 HTML Preview

The Slicer Preferences tab lets you set up how Slicer mode works. The options are as follows:

Default line color - Defines the color of a sliced line once it's been drawn.

Erased line color - Defines the color of an erased line as it's being cleared.

Reference line color - Defines the color of the sliced lines when they are used for reference in Image Map mode.

Default cell properties - This group lets you set up the default tags assigned to sliced cells; these tags can be changed from the Slicer tab. URL is the default destination assigned to the cell when it's clicked inside an HTML page; Target defines the default target frame for any hot cells; and Alt Text is the default alternate text that appears in the <img src> tag and is only visible before an image loads.

Import/Export slice line data only - Imports or exports only your sliced lines but not with the property settings.

  Related Topics


Preferences, Image map
Preferences (Image Map)
 General	 Slicer	 Image Map
 Optimizer	 Page Background	 Presets Manager
 JavaScript	 HTML Preview

The Image Map Preferences tab lets you set up how Image Map mode works. The options are as follows:

Default hotspot color - Defines the color of a hotspot once it's been drawn.

Reference hotspot color - Defines the color of the hotspots when they are used for reference in Image Map or Optimizer mode.

Default image map properties - This group lets you set up the default tags assigned to mapped areas; these tags can be changed from the Image Map tab. URL is the default destination assigned to the hotspot when it's clicked inside an HTML page; Target defines the default target frame for hotspots; and Alt Text is the default alternate text that appears in the <img src> tag and is only visible before an image loads.

  Related Topics


Preferences, Optimizer
Preferences (Optimizer)
 General	 Slicer	 Image Map
 Optimizer	 Page Background	 Presets Manager
 JavaScript	 HTML Preview

The Optimizer Preferences tab lets you set up how Optimizer mode works. The options are as follows:

Default optimization format - Establishes the default file format when the Optimizer tab is selected.

Auto detect and optimize file types for GIF/JPG/PNG files – Lets SmartSaver detect the original file type of the image (for GIF, JPEG, and PNG images only) and automatically select that file type in Optimizer mode.

Beep when optimization is finished - Notifies you that optimization is complete by playing the Windows Default sound.

Calculate estimated download time - Lets you select the desired connection speed used when calculating the download time for an optimized image. (This information appears at the top of the workspace when in Optimizer mode.)

Save comment block – Automatically saves any comment block in your image as you optimize it. This increases the file size slightly.

  Related Topics


Preferences, Page Background
Preferences (Page Background)
 General	 Slicer	 Image Map
 Optimizer	 Page Background	 Presets Manager
 JavaScript	 HTML Preview

The Background Preferences tab lets you set up the default background settings. The options are as follows:

White color - Fills transparent areas with this reference color.

Black color - Fills transparent areas with this reference color.

User selected color - Fills transparent areas with the reference color chosen by the user (colors can be selected from the color picker by clicking the color box.)

User selected image - Fills transparent areas with the image chosen by the user. You can also define the image's X- and Y- Offset in the two corresponding entry boxes (this shifts the image a number pixels based on the value entered; negative values move the image left and up while positive values move the image right and down). Images used this way are converted to either GIF or JPG format.

  Related Topics


Preferences, JavaScript
Preferences (JavaScript)
 General	 Slicer	 Image Map
 Optimizer	 Page Background	 Presets Manager
 JavaScript	 HTML Preview

The JavaScript tab sets the default-scripting behavior for SmartSaver Pro:

Default JavaScript settings - Select Single cell to apply scripting to the selected cell only. Select Multiple cell so that parts of a single image is used as rollover images for all cells.

Rollover events - Select the default event that will trigger the JavaScript rollover.

  Related Topics


Preferences, HTML Preview
Preferences (HTML Preview)
 General	 Slicer	 Image Map
 Optimizer	 Page Background	 Presets Manager
 JavaScript	 HTML Preview

You can preview your SmartSaver images in the browser of your choice:

Default browser(s) - Select your default browser for previewing images: Internet Explorer or Netscape Navigator.

Auto-detect Explorer/Netscape - SmartSaver will automatically detect these two browsers at startup.

Custom browser - Select an additional browser (Lynx, Gecko, Opera, etc.) to include to preview the images.

Encoding – Select a language encoding that you want to use for reading the HTML.

Output absolute position to HTML – Saves the image and its associated HTML so that it is positioned on the page according to the coordinates specified by dragging the object in Full Screen Preview mode.

Show bounding box in full screen preview – Frames the image with a border so that the edges of the image can be easily viewed while in full screen preview.

  Related Topics


Preference, Presets manager
Preferences (Presets Manager)
 General	 Slicer	 Image Map
 Optimizer	 Page Background	 Presets Manager
 JavaScript	 HTML Preview

The Preset manager lets you make changes to any of the preset lists available to you (Slicer, JavaScript, Image Map and Optimizer) as well as to your favorites folders.

Mode preset - Select a button that corresponds to any of the modes in SmartSaver Pro where you can store presets. The presets list appears in the list box to the right. The six mode buttons are: Optimizer (JPG), Optimizer (GIF), Optimizer (PNG), Slicer, JavaScript and Image Map.

Edit preset - The Edit preset controls let you modify existing presets. They are: Move Up, Move Down, Move to Top, Move to Bottom, Rename and Delete (from top to bottom at the right side of the list box containing the preset names).

Set as Default - Defines the selected preset as default. The default preset is displayed below the Presets list. This will be applied whenever you switch to any one of the JPG, GIF and PNG modes in SmartSaver Pro.

  Related Topics


Page Background

Select the color you wish to use as the default transparency place holder (the color used to denote transparent areas in your image) as well as the background color in the Preview tab.

White color - Fills transparent areas or Preview tab with this reference color.

Black color - Fills transparent areas or Preview tab with this reference color.

User selected color - Fills transparent areas or Preview tab with the reference color chosen by the user (colors can be selected from the color picker by clicking the color box.)

User selected image - Fills transparent areas and Preview tab with the image chosen by the user. You can also define the image's X- and Y- Offset in the two corresponding entry boxes (this shifts the image a number pixels based on the value entered; negative values move the image left and up while positive values move the image right and down). Images used this way are converted to either GIF or JPG format.

Apply to Preferences - Replaces the Background Preferences setting with this one.

  Related Topics


Properties Panel (Optimizer - Mask Options tab)

This tab lets you create transparent areas in your JPG, GIF or PNG files based on either a selected color or by using an image mask to key out selected portions of the image and replace it with a transparent color (default is the color you have selected for the Background). Use the Eyedropper or the Eraser on the Tools Toolbar to pick and remove transparent areas.

None – Select to use no transparency masks on the image.

Pick color – Selects the color in the image to base the transparency on. You can select a range of colors using this tool in conjunction with the Adjacent color only and Similarity options, described below.

Adjacent color only – Rather than selecting all portions of the image that contain the color you select for transparency, this option only lets you select areas adjacent to the selected color that either match or fall within its range of similarity.

Similarity – Defines the similarity of the selected color.

Invert Transparent Area – Switches the transparent areas with the visible areas.

Import mask from File lets you use another image as the masking region. Darker areas in the imported mask file are keyed out and the corresponding areas of the original image are made transparent, while lighter areas are retained.

Import mask from plug-in layer transparency Lets you use transparency layers from images exported directly from Adobe Photoshop to SmartSaver.

Apply current mask to distinated frames - Applies the current mask settings to the selected frame(s) or all frames in an animated GIF.

Reset to original mask- Resets all the changes you’ve made to the original image, restoring it to its original appearance.

Fading - Allows you to fade the selected color to blend with the background color. These faded areas will remain visible in your image when displayed in a browser, and thus do not constitute absolute transparency.

Adjust mask - Defines how the mask is blended with the original image in order to create transparent and visible areas. None leaves the mask as is, unchanged; Threshold blends all colors in the selected region that fall within the color range, or the threshold value, of the first color selected; Pattern blends the transparent region of the imported mask with the original image using the pattern dithering method and Diffusion blends the mask using the diffusion dithering method.

Note: The JPG file format doesn’t support transparencies, but SmartSaver gives you a convenient work-around – Using the Mask Options tab, you can blend ‘transparent’ areas with the background color of the web page you intend on embedding the JPG within, or the web page background image. While not a true transparency, it does create the illusion of transparent areas if done carefully.

  Related Topics


Crop

The Crop dialog box lets you pare away unwanted portions of your image. Cropping an image always cuts away portions that lie outside the crop box.

Current image – Select this to work with the most recently edited image.

Original image – Select this to work with the original image, even if you've already made crops to it.

Preview window – The Preview window is where you set up the dimensions of the new, cropped image. Use the bounding box to define the crop, where anything inside the box is retained and everything outside it is pared away. The blue handles on the box can be dragged in and out with your cursor to resize it. Clicking and dragging the box moves it.

Zoom-in/Zoom-out – Zooms in and out on the image so you can work more easily with it in the Transparency dialog box.

Actual view (1:1) – Shows the image at its original size. As the preview window is sometimes not large enough to display the entire image, you can interactively resize the entire dialog box using your cursor to drag its corners out or in, making it easier to view larger images.

Note: The imported image cannot be cropped. (E.g. table background, cell and loaded image.)

  Related Topics


Resample

The resample dialog box lets you resize the image you are working with.

Current image – Select this to work with the most recently edited image.

Original image – Select this to work with the original image, even if you've already resampled it before.

Attributes – Displays the width and height of the active image before resampling.

Keep aspect ratio – Retains the width-to-height proportions of the original image when it's resampled.

Width – Sets the width value of the newly resampled image, either in number of pixels or as a percentage.

Height – Sets the height value of the newly resampled image, either in number of pixels or as a percentage.

Unit – Sets the working unit for width-height resampling. The choices are: Pixels or Percent.

Quality -

Normal – Sets the resample quality to normal, where no color remapping is performed on the image, preserving its color integrity.

Fine – Sets the resample quality to high, where some color remapping is performed on the image, possibly changing its color integrity.

Super Fine – Sets the resample quality to very high, where some color remapping is performed on the image, with a higher probability changing its color integrity.

Note: The imported image cannot be resampled. (E.g. table background, cell and loaded image.)

  Related Topics


Slice Evenly

Slices the image into uniform columns and rows.

Slice  –Select to slice either an Entire image or a Selected cell.

Rows – Cuts the image into X number of horizontal partitions.

Columns – Cuts the image into X number of vertical partitions.

  Related Topics


Properties Panel (Optimizer - Emphasize Area tab)

This feature lets you select portions of an image where you want to retain a higher quality than other portions (generally this is best for images where you have portions of null space and can afford a greater loss in quality in those regions while keeping the overall quality of regions with important image data). Use the Pick tool, the shape tools, and the Magic Wand tool from the Tools Toolbar to make selection areas on the image. These areas receive the settings you create on the Emphasize Area tab, while the other areas receive lower quality settings.

Increase JPEG quality for selected areas - Increases a percentage of the Quality settings in the Optimizer tab and applies them to specific areas in the image. Select these areas using tools in the Tools Toolbar. Select multiple areas simply by clicking on those areas, or delete selected areas by pressing the Delete key. Areas that are not emphasized use the full Quality settings defined on the Optimizer tab.

Reserve colors in the palette - Gives precedence to colors that fall within the Emphasize Area bounding box when building the GIF color palette.

Similarity for Magic Wand tool - Defines the color similarity used when selecting colors with the Magic Wand tool.

Import Emphasized Area from File - Creates a region based on the light and dark portions of an imported file. The lighter portions of the imported file become the area to be emphasized in the working image, while the darker portions of the imported file become the de-emphasized regions in the working image.

Remove All Emphasized Areas Discards emphasized areas and returns the image to its original state.

  Related Topics


JavaScript Panel

This floating panel controls the creation of JavaScript rollover events.

Single cell - Select this option to create a standard rollover event for a single image or a single part (cell) of a larger image. Use this option for images that have not been sliced, or where you want a rollover involving only the sliced part.

Multiple cells - Select this option for images that have already been sliced. This reveals part of an underlying background image upon a mouse event. At the same time, your selected background can be sliced with the same partitions used to slice your current image.

Current cell - Select the cell that calls the rollover event. You can also simply click on the cell you want. The size and position of the selected cell is displayed below.

Events - Select the type of event you would like to trigger the rollover. Over replaces an image segment with a new image when the mouse is over the image; Click engages the rollover when you release the left mouse button over the image; Down switches images when you hold the left mouse button down while the cursor is on the image; Out switches images when you move the mouse away from the image.

Rollover cells - Select the cell you want for the selected rollover image to appear on.

Rollover image - Select an image to appear when the rollover event is called. If the rollover image is larger than the cell, you can click the Snap Cell to Rollover Image Size button so that the image appears in its original size (this also resizes the cells accordingly).

Show rollover - Click this button to preview the rollover.

Enable audio – Select this option to play an audio file when the selected rollover event is called.

  Related Topics


Organize Favorites

This dialog box lets you arrange all your folders that you created for your work.

Folder path - Displays the path of your selected favorite folder.

Favorite name - Lists all of the favorite folders you created.

Add - Click to browse for a new folder to save your work.

Remove - Removes the favorite folders that you do not need anymore.

Rename - Helps to change the name of your favorite folders.

Edit favorites - You can re-arrange the order of folders by selecting one, and then moving it with the arrows below the list. They are: Move Up, Move Down, Move to Top, and Move to Bottom.

  Related Topics


Cell Properties

This dialog box displays the dimensions of the selected cell and lets you specify the background of the cell as well as the image that you want to load into the cell.

Cell dimensions – Displays the width and height of the current cell.

Cell background – Allows you to set the default background of the cell. The background option that you select is displayed for cells that have no image loaded.

No background – Make the empty cell “transparent,” so that the Web page shows through as the background.

Background color – Choose a solid color as the background.

User selected image – Specify an image from a file to be used as the background for the cell.

Cell image – Displays information on the image that is loaded into the cell.

Image name – Shows the current name of the cell image. You can change this name as desired.

Dimensions – Shows the original width and the height of the image.

  Related Topics


Table Properties

This dialog box lets you specify the background of the table and displays information on the size of the table.

Background – Allows you to set the default background of the table. The background that you select is displayed for cells that have no image loaded.

No background – Make empty cells in the table “transparent,” so that the Web page shows through as the background.

Background color – Choose a solid color as the background.

User selected image – Specify an image from a file to be used as the background for the entire table.

Dimensions – Displays the width and height of the table.

  Related Topics


Batch dialog box (GIF / PNG)

Fewest colors - Enter the number of colors you want your test run GIF or PNG files to contain at least during the batch compression process. Less colors result in a larger file size.. Ranges from 4 up to 256.

Most colors - Enter the number of colors you want your test run GIF or PNG files to contain at most during the batch compression process. More colors result in a larger file size. Ranges from 4 up to 256.

Number of tests - Enter the number of test optimized files to be created. In maximum you can have 30 of results for your choices.

Increment - Enter the increasing number of colors for each of the generated test compressed files.

  Related Topics


Batch dialog box (JPG)

This dialog box lets you arrange all your folders that you created for your work.

Lowest quality - Specify the worst quality you expect from the test run images during the batch compression process.

Highest quality - Specify the best quality you expect from the test run images during the batch compression process.

Number of tests - Enter the number of test optimized files you desire to create. Four of the result files will be displayed by default in the automatically opened history window after the process finishes. Maximum you can have 30 of test results for your choices.

Increment - Enter the increasing image quality for each of the generated test compressed files.

  Related Topics


Optimize Images in HTML Files

This dialog box allows you to optimize your images that are descripted in a HTML file or URL path.

Open HTML file in HTTP protocol - Enter the URL link for batch optimizing process. All of the images in this URL will be optimized. A dialog box will be opened for selecting the images that you desire to optimize in this site.

Use proxy Your computer may connect to several different servers Computers that handle networking matters. Each server handles a specific type of network service, such as communicating with HTTP sites or dealing with security. You may specify the name or numeric IP address of the the proxy server in Proxy address for each type of servers: HTTP, FTP, and Gopher. And each proxy server's Port number.

Open HTML file in local directory - Browse for the local HTML files for optimizing the image files contained in it by batch. A dialog box then will be opened for selecting the images that you desire to optimize in this HTML.

  Related Topics


Compress by Size

This dialog box allows you to compress your file by specifying either a file size or a compression ratio.

Original file size - Indicates the original size for your reference (in Bytes).

File size - Enter the desired file size for the image file after compression (in either Bytes or Kilobytes)

Compression ratio - You may define the ratio that you want to compress your file size compared to the original one.

  Related Topics


What's new in version 2
What's New
 version 3.0	 version 2.0	 version 1.0

JavaScript rollovers - Added functionality to SmartSaver Pro that lets you create amazing JavaScript Rollovers for your web page. You can also create 'distance rollovers' where you mouse-over one image and another image changes instead.

Custom preview - Now you can preview your work in the browser of your choice, in addition to using Microsoft Internet Explorer and Netscape Navigator if they already exist on your system. The custom preview feature assigns the browser you select to that button on the standard toolbar, making it easy for you to check your work in legacy or alternative browsers.

Save to Favorites - Using this feature, power-users who manage multiple web sites can save their favorite works easily in separated folders.  And Organize Favorites on the standard toolbar allows to re-arrange your favorite folders. This makes it easy for you to work with your web-site images as well as save you valuable time.

Universal presets - Save presets in any mode, whether it is Slice, JavaScript, Image Map or Optimizer, in order to make your work easier and more efficient.

Preset manager - The Preset Manager lets you edit the preset lists for each SmartSaver mode, allowing you to customize the program to fit your work habits.

Improved save - The save feature has modified to give you the greatest flexibility possible when working with your images. Save HTML automatically with your web-images, or turn this feature off if you don't like it.

Improved table cell data export - SmartSaver Pro now saves associated HTML information when exporting table cell data for use again at a later date.

New Developved GIF Optimization Engine - A more powerful optimization engine - Minimum Variance retains even more amazing image quality (Better than the one which is optimized by the original engine - Median Cut.)


What's new in version 3
What's New
 Version 3.0	 version 2.0	 version 1.0

Improved slicing and table management – This version lets you slice images with greater flexibility and ease – not only can you freely create and edit sliced lines, but you can also create a blank table from scratch. You can also save just the sliced lines as a preset. Further controls let you load images into individual cells, easily navigate from cell to cell, view information on each cell, and scroll through the frames of an animated GIF right on the Frames and Cells panel.

HTML support – New features let you move the image to an absolute position on the web page and save it to the HTML code and update existing HTML for previous projects, among others. More than that, for efficient workflow, you can also batch process images from an HTML file, either directly from a web site or from a local file.

JavaScript rollover enhancements – Added options let you easily create astounding JavaScript rollovers, including audio rollovers and multiple rollovers for individual cells. You also have more rollover events to choose from than last version.

Improved optimization – This version gives you increased control in optimizing images - you can set JPEG image quality and color quality individually, specify the amount of dithering for GIF and PNG formats, and convert colors to a Web palette. You can even optimize cell images and rollover images individually. The Color Palette also gives you a wider range of tools for editing individual and groups of colors.

Preview options – You now have a wide range of options for previewing your image. In addition to previewing it in IE and Netscape, you can view simulated displays of the Apple Macintosh system, and 256-color display. A special Full Screen Preview mode also lets you view and reposition your image directly on the preview screen, then output the position to the HTML code.

Batch processing features – New options let you refine the optimization settings to get the results that you want when batch processing a large number of images. You can let SmartSaver optimize images based on their original file type, resample images while maintaining their original proportions, and name images according to the parameters that you specify.

File format support – More file formats are supported in this version of SmartSaver Pro. Also, when opening Adobe Photoshop files (*.PSD), you can now choose to retain the layers in order to create an animated GIF, or you can open all layers merged together as a single still image.

Visual open – Conveniently browse through thumbnail representations of image files to choose the ones you want work with, instead of having to remember which file names belong to which images.


What's new in Version 1
What's New
 version 3.0	 version 2.0	 Version 1.0

All new interface - This version of SmartSaver is radically different from previous versions. In addition to sporting a fancy new UI (user interface), it also adds two major new components to our award-winning Optimization engine: Imaging Slicing and Image Mapping.

Image slicing - Slice and dice your web-images to facilitate rapid download and previewing. SmartSaver automatically generates the appropriate HTML code to reassemble the carved apart image.

Image mapping - Create instant clickable hotspots over optimized and sliced images. As with slicing, SmartSaver's intelligent HTML engine automatically generates all the necessary code for you to integrate your mapped images into your web pages.

Improved optimization - SmartSaver's optimization is significantly enhanced. Now you can assign priority to specific color channels when building Indexed color palettes, and emphasize specific regions of an image to receive higher quality settings than other regions.

Completely rebuilt batch processing - Batch processing in this version of SmartSaver has been completely overhauled, making it easier for webmasters to optimize an entire web site.

Customizable User Interface - All major dialog boxes and the main program window can be resized to fit your work habits, and all panels and toolbars can be set floating or rearranged however you like.

Optimization Presets - Save your favorite optimization settings as a preset for use again and again in future.

Improved History window - Store images with different optimization options in the History window and then compare them side by side.


JavaScript Rollovers

JavaScript was originally developed by Netscape as means to add more interactivity to web pages and was later adopted, in some form, by the World Wide Web Consortium as part of the official HTML 4.0 recommendation. JavaScript, as proposed by the W3C, is formally called 'Ecmascript', but most people still refer to it as JavaScript or 'JS'.

So what does it do? Among other things, JS can be used to create interactive images that respond to a user's mouse cursor. Images can be set to change when a user 'mouse over', clicks, 'mouse down' or 'mouse out' of it. A mouse out is when the user moves the cursor away from the image in question. These are just a few things that the JavaScript allows you to do on your web page, and the primary focus of SmartSaver Pro's JavaScript functionality. Collectively, these mouse-image functions are called 'rollovers', and SmartSaver Pro gives you the tools to easily create them without having to know or understand JavaScript.

Click here for more on creating JavaScript rollovers.

  Related Topics


Customizing your previewing browsers

HTML Preview lets you customize the third preview button on the standard toolbar, assigning it either to a legacy browser or an alternative, non-"Big 2" browser.

1	Click the File: Preferences menu command. The Preferences dialog box opens.

2	Select the HTML Preview tab.

3	Click the browse button for the Custom Browser category. When the browse dialog box opens, locate the primary executable (EXE) of the browser you want to use.

4.	Click OK to close the dialog boxes. The next time you click the Custom Preview button, the selected browser opens displaying your work.

5. You may view your image in the Custom Browser with the position according to the coordinates that you have specified in Full Screen Preview mode by checking the Output Absolute position to HTML.

  Related Topics


Save to Favorites

The Save to Favorites command allows you to quick save your work to the currently selected Favorites folder.

1	Select a folder from the Favorites Folder drop-down menu on the standard toolbar.

2	Click the Save to Favorites button. You images are quick-saved to that folder.

You can designate Favorites folders by selecting the Organize Favorites item on the drop down list.


Working with presets

In any of the 4 primary modes within SmartSaver Pro, you can save your current settings a 'preset'. Later, when you want to use this preset again, simply select it from the Presets list on the Properties panel and those settings are restored.

To save settings in a given mode:

Click the Save Settings icon on the Properties panel. This is located immediately to the right of the Presets menu.

To manage presets for a given mode:

Click the File: Preferences menu command. The Preferences dialog box opens, where you can select the Presets Manager tab. There you can remove, rename and re-order presets for each of the modes available in SmartSaver Pro. For more on the Presets Manager, click here .


Creating JavaScript rollovers

JavaScript rollovers are created on the JavaScript tab of SmartSaver Pro. Unlike other aspects of the program, this one requires secondary, outside images to be linked to the current image in the rollover code. For more on what JavaScript rollovers are, click here .

1	Click the JavaScript tab to switch to that mode. The JavaScript panel will be activated at the same time. If you have already sliced your image, then the slice lines will be used to break the image apart for JavaScript mode.

2	Choose one of the two options available before you create a JavaScript rollover event: Single cell and Multiple cells.

3	Select the sliced part of the image you want to assign a rollover to from the Current cell list, or by clicking on it in the workspace.

4	Select the type of rollover effect you want from the Rollover events list. Available effects are: Over, Down, Click, and Out. Over replaces an image segment with a new image when the mouse is over the image; Click engages the rollover when you release the left mouse button over the image; Down switches images when you hold the left mouse button down while the cursor is on the image; Out switches images when you move the mouse away from the image.

5	Select the image to appear when the rollover happens. You can do this by clicking the Browse button for the Multiple cell entry line or the browser button for the rollover image entry line.

6.	If you are creating a rollover for a single cell, and if the rollover image is not the same size as the cell, then it will be automatically re-sized to fit the single cell. If you are creating a rollover using the multiple-cell option, the rollover image is re-sized to fit the entire image.

7.	For sliced cells, the default setting for all the rollover location is Same As Original (this is the standard behavior, where the mouse over image is replaced). However, you can also assign a Distance Rollover, where a completely different image cell changes with when you mouse over the target image cell. You can select the "distance cell" from the Rollover cells list or by holding "Ctrl" key and click the cell.

You can view only the rollover images you have selected by clicking the Show Rollovers button. To restore the original images, click it again. If you want to import a single background image for use with all of the image cells, click the Multiple cell button. The image is automatically sliced according to the sliced lines used by the original image, and all corresponding image rollover images are resized to fit the original image cells.

8.	If you want to have an audio file to be played when the selected rollover event is called, select the Enable audio option.

Note: Multi-audio rollovers can be performed in Internet Explorer, In Netscape. Only one audio rollover audio file will be played no matter how many you defined in different events.


Creating a New Table

The New Table command allows you to quickly open a blank table by specifying new table size and number of cells it contains. After it appears in the workspace, you can import images into the cells.

1	Click the File: New Table command. The New Table dialog box opens.

2	Enter the width and height for your new table.

3	Specify the number of rows and columns you need to have in your new table.

4.	The new blank table appears in the workspace.

5.	You may slice the table before you import an images into this table.

How to utilize the new table?


Making your background animating

There are ways to create an animating background:

You can either create an animating background for your single cell image or for the whole table.

For cell image:

1.	Go to the File Menu and select New Table to create a blank table.

2.	Switch to the Slicer mode to slice your new table.

3.	Load an image into one of the sliced cells. (This step is optional.)

4.	Right click on the import cell image and to select the Cell Properties from the menu.

5.	When the Cell Properties dialog box is opened, select the User selected background,

6.	Browse for an animation file as your cell background. This file can be a still image.

For entire table:

1.	Go to the File Menu and select New Table to create a blank table.

2.	Switch to the Slicer mode to slice your new table. (This step is optional.)

3.	Load an image into one of the sliced cells.

4.	Right click on the import cell image and to select the Table Properties from the menu.

5.	When the Table Properties dialog box is opened, select the User selected background,

6.	Browse for an animation file as your table background. This file can be a still image.

Note: The table background image is tiled up as its original size to fit in your entire table.


Working with Color Palette

There are many tools in Color Palette that help you to keep your color in the optimized image as close as the original one. For example, after you have optimized your image and the result is not quite as you expected. Or the major color is lost too much after optimization process and you want it to be recovered to the original one. The color replacing tools in the color palette can help you to conquer the problem:

1.	Click on the targeted color on the original image.

2.	The mouse becomes an eyedropper that lets you choose colors in the original image. At the same time, this color will appear in the [Working Color] window on the optimized color palette.

3.	Click on the area on the optimized image that you want to replace with the selected color.

4.	Go to color palette and select the Replacing color tool and the color in this area will be switched by the color in the working color window. But the total number of the colors of the optimized image will remain the same.

Another situation is the major color in an image that you do not want to lose after the compression process. The Lock Color tool can make a certain color remain in the palette, even if you change palette settings on the Optimizer panel.

1.	Select the color cell that you want it stay in the color palette after optimization process.

2.	Click the Lock Color tool and the color locked mark will be indicated on the right bottom side of the color cell.

3.	Start up an optimization process. No matter how many colors you specified in the optimizer mode, the locked color will always remain in the color palette after the process completes.


Full Screen Preview mode

This feature lets you preview your image in a full screen mode. In this view, you can change the position of the image as it will appear on the web page by dragging it. You can also view the image as it appears in a 256-color or Apple Macintosh display.

1	Click the Full Screen Preview Mode button on the Standard Toolbar. A toolbar appears at the upper right corner contains controls to adjust the preview settings.

2	Move your image to the desired position by dragging it. Click the Show Bounding Box button to view the border of the image as well as its position coordinates.

3	Check Reset Offset to Zero if you decide to return the image to its default position (0,0).

4	Click the display simulation buttons (256-color or Apple Macintosh) to view the image as it appears in different display environments.

5	When you have the image positioned where you want, click the Apply Offset upon Exit button. This saves the coordinate information in the HTML code for that image.


Creating JavaScript Rollovers

SmartSaver Pro lets you create a large variety of rollover effects. Click this link of an example (You will need a browser to view this sample) to view some of the many features in action:

Here, you see that "distance" rollovers have been used, meaning that when you mouseover an image, another image appears in a different location. This is different from the traditional button rollovers, in which the rollover image appears in the same place as the original image. In the following tutorial, learn how to make a basic "distance" rollover.

To create a JavaScript rollover for different cells:

1.Open an image in SmartSaver. For this tutorial, slice the image into 4 cells in Slicer mode.

2.Switch to JavaScript mode. Click the cell that you want to trigger the rollover event.

3.Select a Rollover event that you want to call with the cell that you just chose. In this example, we'll leave it at Over, which means that the rollover event is called when you move the mouse over the image.

4.On the JavaScript panel, select a Rollover cell. By default, the cell that you chose to trigger the rollover is also selected as the rollover cell. Deselect this cell and select a different one.

5.Under Load image on the JavaScript panel, select an image that you want to appear as the rollover image.

6.Go to Preview mode to test your rollover image. When you move the cursor over the image, the rollover image should appear in a different location.

7.If you want, you can also go back and insert more rollover images that appear with different events in different cells. You can also use audio files in rollover effects.

Another fun way to use JavaScript rollovers is to have an event call up an animated GIF, just as in this example:

When you click the buttons, it looks like you are controlling the animation in the screen. Actually, the three different buttons call up three different animated GIFs using the JavaScript features in SmartSaver Pro. As for the still image, this is loaded into a normal sliced table cell, with no rollover events attached to it. Therefore, it appears by default, unless an even is triggered.

Learn to achieve a similar, but more basic effect in this tutorial.

To use an animated GIF as a rollover image:

1.Create a new table. For this example, make it 320x200 with 2 columns and 2 rows.

2.In Slicer mode, select a cell, and load an image into it. Try using a button image, if you have one.

3.Switch to JavaScript mode. Click the cell that contains the image. This cell is now set to trigger the rollover event.

4.Select a Rollover event that you want to call with the cell that you just chose. In this example, set it to Click, which means that the rollover event is called when you click the image with the mouse.

5.On the JavaScript panel, select a Rollover cell. By default, the cell that you chose to trigger the rollover is also selected as the rollover cell. Deselect this cell and select a different one.

6.Under Load image on the JavaScript panel, select an animate GIF file (*.gif) that you want to appear as the rollover image.

7.Go to Preview mode to test your rollover image. When you click on the button, the GIF animation appears.

In this example, you will see another interesting use of GIF animation together with a sliced image.

To combine a sliced image with an animated GIF:

1. Open an image in SmartSaver.

2. In Slicer mode, slice the image until you have the number of cells that you want.

3. On the Tools toolbar, select the Pick Tool, then click on the cell in which you want to insert an animated GIF.

4. On the Frames and Cells panel, go to the Load image section, and browse for the animated GIF file that you want to use. Select a transparent GIF if you want the background (i.e. the image that you originally opened) to show through as the background of the GIF.

5. If you want the cell to fit the original size of the GIF, click the Snap Cell to Image Size button. Generally, if you want to do this, you should make sure that the dimensions of the GIF image are smaller than the dimensions of the image that you slice.

6. Go to Preview mode to view the results. The animated GIF should move, with the original loaded image showing through as the background.


end